React学习笔记

关于JSX的三个问题

1. JSX的本质是什么，它和JS之间到底是什么关系？ JSX是JavaScript的一种语法扩展，它和模板语言很接近，但是它充分具备JavaScript的能力。

JSX通过Babel编译为React.createElement调用，再被React内部的ReactElement调用生成虚拟Dom，虚拟Dom通过ReactDOM.render函数渲染处理成真是的Dom。
2. 为什么要用JSX？不用会有什么后果？
// todo
3. JSX背后的功能模块是什么，这个功能模块都做了哪些事情？
// todo

数据在React组件之间中是如何流动的？

1. 单向数据流

• 当前组件的state以props的形式流动时，只能流向组件树中比自己层级更低的组件。

  • 父-子组件通信： 父组件可以直接将this.props传入子组件
  • 子-父组件通信： 通过函数入参回调传给父组件
  • 兄弟组件通信：利用共同的父组件传入

2. 任意组件间流动

• 实现EventEmitter：使用“发布-订阅”模式驱动React数据再任意组件间流动。

3. Context

• 使用React.createContext，获得Provider和Consumer。

4. redux

• store = createStore
• action
• reducer

虚拟DOM的两个大问题

1. 挂载阶段

• React将结合JSX的描述，构建出虚拟DOM树，然后通过ReactDOM.render实现虚拟DOM到真实DOM的映射（触发渲染流水线）。

2. 更新阶段

• 页面的变化会先作用于虚拟DOM，虚拟DOM将在JS层借助算法先对比出具体有哪些真实DOM需要被改变，然后再将这些改变作用于真实DOM。

DOM操作解决方案

1. 读取HTML模板并解析它，分离出其中的JS信息。
2. 将解析出的内容拼接成字符串，动态生成JS代码。
3. 运行动态生成的JS代码，吐出“目标HTML”。
4. 将“目标HTML”赋值给innerHTML，触发渲染流水线，完成真实DOM的渲染。

Hooks是如何帮助我们升级工作模式的？

1. 告别难以理解的Class。
2. 解决业务逻辑难以拆解的问题。
3. 使状态逻辑复用变得简单可行。
4. 函数组件从设计思想来看更加切合React的理念。

React函数组件与类组件的对比

1. 类组件需要继承Class，函数组件不需要。
2. 类组件可以访问生命周期方法，函数组件不能。
3. 类组件中可以获取到实例化后的this，并基于这个this做各种各样的事情，而函数组件不可以。
4. 类组件中可以定义并维护state（状态），而函数组件不可以。

React 生命周期

1. Mounting阶段：组件的初始化渲染（挂载）

• 组件挂载：初始化渲染
  • constructor()
    • componentsWillMount -> render -> componentDidMount
    • React16.3版本：getDerivedStateFromProps （1. 是一个静态方法。2. 内部不能使用this.props。 3. 接收两个参数: props和state。 4. 需要一个对象格式的返回值，否则会报Warning）

2. Updating阶段：组件的更新

• 组件更新：由父组件出发
  • componentWillReceiveProps
    • shouldComponentUpdate -> componentWillUpdate -> render -> 1. componentDidUpdate； 2. 16.4版本 getSnapShotBeforeUpdate（需要和下面的生命周期配合使用，返回值是componentDidUpdate的第三个参数）
    • componentReceiveProps并不是由props的变化触发的，而是由父组件的更新触发的。
  • React16.4版本 getDerivedStateFromProps

3. Unmounting阶段：组件的卸载

• 组件卸载： componentWillUnmount

React中key属性的作用

1. key是用来帮助React识别哪些内容被更改、添加或者删除。
2. key需要写在用数组渲染出来的元素内部，并且需要赋予其一个稳定的值。稳定在这里很重要，因为如果key值发生了变更，React则会触发UI的重渲染，这是一个非常有用的特性。

持续补充中...

// todo