React源码学习：React 介绍、jsx 语法 、组件、表单

p1-p5 React 设计原理解密及核心源码解读

React 介绍

• 是一个 javascript lib
• jsx 语法

函数组件 + 默认值

function MyComponent(){}
MyComponent.defaultProps = {}

单向数据流

子组件想修改父组件的属性

• 父组件传递修改的方法给子组件
• 子组件调用这个方法即可

生命周期函数 ClassComponent

• render 渲染阶段
  • constructor: 类的入口，第一个执行
  • getDerivedStateFromProps:
    • 当前组件的内部状态(state)，完全取决于父级，则在这里处理
    • 默认：不更新，(props, state: 当前组件的state) => null
    • 如果要更新，返回一个全新的状态对象
  • render: 挂载DOM对象
• mound 挂载阶段
  • componentDidMount
• render
• update 更新阶段
  • getDerivedStateFromProps
  • shouldComponentUpdate
• unmount
  • componentWillUnmout: 处理一些清理操作
  • 清理整件
  • 清理 ref 绑定的一些 DOM 对象
• 一个比较少用到的 getSnapShotBeforeUpdate
  • 会在 render 之后执行
  • 用于执行某种逻辑或者计算，会返回一个值
  • 这个可以在 componentDidUpdate 的第3个参数中拿到上面的值
  • 总结：这个会在组件更新之前，做一些计算逻辑，在 componentDidUpdate 中进一步处理快照

Context 跨级使用数据

• 层级较深
• 有些中间组件，根本不需要用到这个数据，但需要作为数据载体来传递数据

表单组件

• 受控表单
  • 表单的数据，与 state 完全对应
  • 状态完全受 react 控制
• 非受控表单(普通表单)
  • 表单中的数据，完全由 DOM 元素本身决定
  • 一般：会涉及 ref 的使用

参考

• https://www.bilibili.com/video/BV11A4y1S7KN?p=1