React-CONCEPTS

[iidear]

https://reactjs.org/docs/hello-world.html

[iidear]

JSX

Preact 的作者写过一篇文章解释 jsx，可以说很清晰了。

一般语法

const element = <h1 className="greeting">Hello, jsx!</h1>

经过 babel + plugin-transform-react-jsx 处理之后，等价于

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, jsx!'
)

代码执行之后，返回一个对象（VNode），类似于

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, jsx!'
  }
}

注意点

• 大写字母开头的元素会解释为 组件，小写字母开头的解释为普通 html 元素

  const com = <Com>hello</Com>;
  // 等价于
  const com = React.createElement(Com, null, 'hello');

• Babel 提供了在线转译的编辑器 。

[iidear]

Rendering Elements

const element = <h1>hello, react!</h1>;
const root = document.getElementById('root');
ReactDOM.render(element, root);

element 是一个 VNode (js对象)，root 是一个 DOM Node。

ReactDOM.render 方法会将 element 表示的内容更新到 DOM 中。

使用 diff 算法，只更新必要的部分，尽可能地减少 DOM 操作。

Components、Props、State、Lifecycle

组件

• 应用由组件组成，拆分应用，屏蔽细节，降低应用的复杂度。
• 组件由元素组成，形成基本的功能单元，便于复用。

状态

• props 接收外部状态
• state 持有私有状态

生命周期

• 组件从创建到销毁中间有多个状态，提供状态变化时的钩子，控制组件状态变化时的行为

事件绑定

• 绑定事件执行时，参数是 React 创建的，符合 w3c 规范
• 绑定事件执行时 this 的问题
• 推荐使用bind

  
  // 不推荐，每次 button 被渲染时会重新创建一个回调函数。
  // 如果被传递到子组件，可能会导致额外的重渲染
  // https://stackoverflow.com/questions/50421483/take-the-example-of-the-handling-events
  const btn = <button onClick={() => this.submit.bind(this, data)}>submit</button>

// 推荐 const btn = <button onClick={this.submit.bind(this, data)}>submit

[iidear]

API

https://zh-hans.reactjs.org/docs/react-api.html

概览

• 组件

  • React.Component
  • React.PureComponent

• React 元素

  • React.createElement
  • React.createFactory

• DOM、组件实例相关（ref）

  • React.createRef
  • React.forwardRef

• React 元素工具方法

  • React.cloneElement
  • React.isValidElement
  • React.Children

• 性能优化

  • React.memo
  • React.lazy
  • React.Suspense

• 其他

  • React.Fragment

• Hooks

• ReactDOM

  • render
  • hydrate
  • unmountComponentAtNode
  • findDOMNode
  • createPortal

[iidear]

组件

生命周期

声明周期速查表

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

相关方法

• constructor
• render
• componentDidMount
• componentDidUpdate
• componentWillUnmount
• static getDerivedStateFromProps
• shouldComponentUpdate
• getSnapshotBeforeUpdate

备注

• 16.3 版本之前，如果 props 没更新（setState、forceUpdate），则不会触发 getDerivedStateFromProps 方法。16.4 及之后版本都会触发 getDerivedStateFromProps

错误处理

• static getDerivedStateFromError
• componentDidCatch

处理派生 state

派生 state 即数据来自外部的 state（跟随 props 变化的 state）.

处理方式：

1. 使用受控组件
2. 使用非受控组件，通过在组件上设置不同的 key 来重置组件。
3. 复杂组件，如带有中间状态的 Picker 等，使用 componentDidUpdate 或 getDerivedStateFromProps。通过比较 prevProps 和当前传入 props 是否一致判断是外部更新还是组件内部更新。

[iidear]

组件性能优化

合理拆分组件

用好 shouldComponentUpdate

1. 每次触发 render （setState、forceUpdate）。都会从根节点开始遍历。
2. 从根节点开始，会跳过不需要重新 render 的组件。
3. 需要重新 render 的组件的所有的子组件会根据 shouldComponentUpdate 决定是否重新 render .

优化方式：

• React.memo
• React.PureComponent
• shouldComponentUpdate

https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/

[iidear]

Build your own React

https://pomb.us/build-your-own-react/

• createElement
• render
  • workLoop
  • createDOM
  • reconciler(render children + diff + compute effect)
  • return nextUnitOfWork
  • commitRoot
  • commit effects、update dom

[iidear]

TODO: 源码中的性能优化

• 调度相关的上下文变量 priorityLevel、lane、executionContext.