3 - React / Redux

[Linjiayu6]

React.js

理解数据结构 树和链表 (为什么会有React16+ 版本的大变更)
理解函数式编程 为什么React 和 Redux如此使用
理解数据结构基础上 还要理解 React生命周期变更 / 在Fiber基础上 React Hook等应用
....

[React] 1 - 组件是什么? Virtual Dom?

- 组件是什么?
- virtual dom?
- 简单手写virtual dom创建?

[React] props vs state ?

[React] 2 - 生命周期

- 生命周期?
- 哪些不可以用setState?
(我理解要硬都可以，但看你怎么用,  加个判断条件, 但考虑的肯定是性能方面，尽可能减少不必要的render。只执行一次的生命周期函数肯定是能用，但要考虑到会触发重新render。最好不要在shouldUpdateComponent, WillUpdateComponent 阶段主要是 因为会死循环的。包裹在render() 里面去更新也会。

[React] 3 - 自动绑定 (事件绑定)

- 为什么会需要自动绑定?
- 有什么方法解决?

[React] 4 - setState / 异步还是同步?

- 异步 还是 同步?
- 批量更新意义?
- 更新流程?
- setTimeout / 原生事件里面, 为什么是同步现象?
- 为什么建议传递给 setState 的参数是一个 callback 而不是一个对象?  
因为是异步的更新， callback保证state处理成功后, 回调其他的处理。

[React] 无关平台

不用关心具体运行环境, 可到处运行。 

因为React本质是个UI层的东西, 用js来封装个函数, 产物是个Vnode。 

UI层在小程序 客户端 小程序都是差不多的

[React] 5 - react / react-dom

- import React from 'react'; ???
- import ReactDOM from 'react-dom'; ???

[React] 6 - React Fiber 基于浏览器的单线程调度算法

- React Fiber? 解决什么问题?
- 工作流程?

[React] 7 - 组件通信

1. 父组件传给子组件
2. 子组件传给父组件
3. 类似 Node.js  EventEmitter (注册事件, 调用事件)
4. Context方式 (Provider,  Consumer)

[React] Ref

可以用于获取一个 DOM 节点或者 React 组件的引用

// <h3 ref="vm">2. Virtual Dom</h3>
componentDidMount()
    this.refs.vm.setAttribute('class', 'vmstyle')

    console.log(this.refs.vm)
// 输出 <h3 class="vmstyle">2. Virtual Dom</h3>

[React] super(props)

// super(), 继承父类(React.Component)的this方法,  但无法得到从父组件传的props。

constructor() {
  super()
  // 如果不加上super 
  // 继承的子类不能使用React.Component this
}

// super(props), 使用this, 并得到从父组件传来的props
constructor(props) {
  super(props)
}

[React] 8 - React 自身或工程性能优化点?

[React] 9 - Redux 图解原理

[React] 10 - HOC高阶组件 / React Hook

[React] 11 - diff算法 / 算法简单实现 (15版以下)

[React] 12 - React16 VDOM 链表结构

[React] 13 - SSR / CSR / Isomorphism

[Linjiayu6]

受控组件和非受控组件

【受控组件】像input这种可表单输入维持自身状态，可通过onCange this.setState 方法来更新。
主打实时，因为onChange处理。
{{ this.state.name}}
handleChange = () => this.setState({ [name]:  e.target.value })
onChange => {this.handleChange}

【不受控组件】更新input这种 。通过ref 操作DOM来获取，并有defaultValue来获取默认值。
<input ref={username}/ defaultValue="beijing">

【场景不同】不受控组件主要是 一次性的使用模式 / 默认模式。

[Linjiayu6]

Node使用场景

Node特性是 单线程 (利用事件循环机制) 异步I/O, 高并发 => 不像Java一样，来一个请求创建一次线程。
Java更适合计算密集类型。遇到计算会无法释放时间片，后续I/O 无法发起。

Node广泛被应用的场景:
1. BFF: focus 在api侧，除了说有接口透传能力，像分渠道业务请求外。比较大的价值是: 是底层的粘合。
例如 从Node层就可以做好对底层的保护。例如 在Node层就限流。
2. 渲染模式: 不管是SSR 同构 CSR 本质都是解决一些问题。
3. 其他: 一些场景，例如全端可以有更多的可能性。

[Linjiayu6]

JS为什么单线程?

js是浏览器端的。主要是操作DOM使用。
浏览器操作，如果不是单线程，DOM操作会乱掉，有很多个人操作，具体是删除修改新增什么的，都不明确。
不如一个人指挥操作。

创建多线程环境: 主线程做自己的事儿DOM，子线程不得处理UI, 做其他的事儿，结果交给主线程。
现在像web worker 是有主线程和 创建子线程的。
- Web worker: 目标是减轻进程工作任务密集。
- Service worker: 浏览器和网络间的代理 离线目标。
- Worklet: 浏览器渲染 HOOK

[Linjiayu6]

React事件流合成机制 SyntheticEvent

• 你能看到当前这个结点 绑定了click事件

componentDidMount () {
      document.getElementById('child').addEventListener('click', function() {
          console.log('document')
      })
  }

• 你能在chrome浏览器发现，该事件代理到了 document上面去

handleChild = () => {
    console.log('儿子')
  }
<div onClick={this.handleChild} id="child">儿子</div>

本质: 利用冒泡机制，冒泡到document
解决: 磨平浏览器的差异
好处: 所有的事件都合成委派到document, 当DOM更新的时候，不用跟踪事件监听器。