React中易混淆不理解的概念 持续更新... - junruchen/junruchen.github.io GitHub Wiki

本文主要记录，在多次阅读官方文档与查阅资料过程中，对一些易混淆或不易理解的概念整理，持续更新中...

受控组件 与 非受控组件

受控组件:

  • 渲染表单的 React 组件控制用户输入过程中表单发生的操作，如 state 作为唯一的数据源，只能通过 setState 更新。
  • 对于原生的 <input type="text">, <textarea> 和 <select> 之类的标签，均接收一个 value 属性，通过该属性，配合操作函数，使之成为受控组件。

非受控组件：

  • 如 <input type="file" /> value属性只读，为 React 的一个非受控组件。

状态提升

  • 在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。
  • 虽然提升 state 方式比双向绑定方式需要编写更多的“样板”代码，但带来的好处是，排查和隔离 bug 所需的工作量将会变少。由于“存在”于组件中的任何 state，仅有组件自己能够修改它，因此 bug 的排查范围被大大缩减。

Fragment

当一个组件需要返回多个元素，又不想添加额外的节点时，可使用 Fragments

  • 短语法 <></>
  • 只有 <React.Fragment> 可以具有key

高价组件 HOC

  • 基于 React 的组合特性而形成的设计模式，组件作为参数，返回值为新的组件。
  • 组件将props转成UI，高价组件将组件转成另外一个组件。
  • HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有副作用。
  • https://zh-hans.reactjs.org/docs/higher-order-components.html

JSX

只是 React.createElement(component, props, ...children) 函数的语法糖。

Portal

提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

// child: 可渲染的 React 子元素, container: DOM 元素
ReactDOM.createPortal(child, container)

React.Component 与 React.PureComponent:

  • 两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。
  • React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层比较。如果对象中包含复杂的数据结构，则有可能因为无法检查深层的差别，产生错误的比对结果。仅在你的 props 和 state 较为简单时，才使用 React.PureComponent，或者在深层数据结构发生变化时调用 forceUpdate() 来确保组件被正确地更新。你也可以考虑使用 immutable 对象加速嵌套数据的比较。
  • React.PureComponent 中的 shouldComponentUpdate() 将跳过所有子组件树的 prop 更新。因此，请确保所有子组件也都是“纯”的组件。

Render Props

是一种在 React 组件之间 使用一个值为函数的prop 共享代码的简单技术。

具有 render prop 的组件接受一个函数，该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>
⚠️ **GitHub.com Fallback** ⚠️