React 基础

一、生命周期

react 老生命周期：

• mounting 阶段：constructor、componentWillMount、render、compoentDidMount
• update 阶段: 
  • props变化：componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentUpdate
  • states变化： shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
• unmounting 阶段: componentWillUnmount

补充：

react组件什么时候触发unmounting阶段（被销毁的时候）

• 组件从DOM中被移除：当组件从DOM中被移除时，React会自动触发组件的unmounting过程。
• 父组件重新渲染：当父组件重新渲染时，如果子组件不再被渲染，React会自动触发子组件的unmounting过程。
• 组件自身调用setState方法：当组件自身调用setState方法，并将组件状态设置为null或undefined时，React会自动触发组件的unmounting过程。
• 组件被替换：当组件被替换为另一个组件时，React会自动触发组件的unmounting过程。

react16 新生命周期

• creat：constructor、getDerivedStateFromProps、render、componentDidMount
• update: getDervedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate、componentDidUpdate   注：props和state更新走同一个数据流程、forceUpdate不走shouldComponentUpdate
• unmounting： componentWillUnmount

二、继承

• es6类通过extends继承，super（data），通过this直接拿父组件constructor中的data
• 类组件，子组件通过props拿组件调用时传的值

三、渲染以及运行机制

• react不会把事件代理函数直接绑定到真实的节点上，而是把所有的事件绑定到结构的最外层，使用一个统一的事件去监听
• 事件处理顺序：原生事件、react事件、document上挂载的事件

四、react组件

• 组件之间的传参：父传子通过super直接拿props,字传父通过父传子一个方法子调用方法父回调方法得到的值，兄弟组件的传参通过父传子再子传父（一般直接用redux就ok了）
• 列表必须有key, react和vue一样使用了diff算法判断页面状态有无改变，列表这种状态值极易改变的dom, 采用key可以避免使用diff算法节省性能开销
• 函数式组件无法使用setState进行状态库管理，而类组件可以。Hook 解决函数式组件无状态的缺点

五、react Hooks

• const【状态，方法】= useSate(默认值)：对变量设置状态
• useEffect(回调函数，监听对象) ： 监听对象并对其进行渲染

六、Redux

redux 通过 createStore 创建的 store 的内置方法：getstate() 、dispatch()