React Api

Posted 2020-12-16 心悠魂然

1.React.Component定义react组件的基类。

2.React.PureComponent使用请确保子组件都是纯组件，由于其实现了
shouldComponentUpdate() 将跳过所有子组件树的 prop 更新。

3.React.memo 仅检查 props 变更。
如果函数组件被 React.memo 包裹，且其实现中拥有 useState 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染

4.cloneElement()以 element 元素为样板克隆并返回新的 React 元素，浅合并。

5.isValidElement()验证对象是否为 React 元素

6.React.Children 提供了用于处理 this.props.children 不透明数据结构的实用方法
React.Children.map
React.Children.forEach
React.Children.count
React.Children.only
React.Children.toArray

7.React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。

8.React.createRef 创建一个能够通过 ref 属性附加到 React 元素的 ref

9.React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中

10.React.lazy() 允许你定义一个动态加载的组件。这有助于缩减 bundle 的体积，并延迟加载在初次渲染时未用到的组件。

11.生命周期
渲染阶段生命周期componentWillMount,componentWillReceiveProps ,componentWillUpdate
挂载执行顺序constructor-static getDerivedStateFromProps()-render()-componentDidMount()
更新执行顺序static getDerivedStateFromProps()-shouldComponentUpdate()-render()-getSnapshotBeforeUpdate()-componentDidUpdate()
卸载componentWillUnmount()
错误处理static getDerivedStateFromError()-componentDidCatch()

componentDidMount()：会在组件挂载后（插入 DOM 树中）立即调用。
依赖于 DOM 节点的初始化应该放在这里，请求网络数据的好地方。
componentDidMount() 里直接调用 setState()

componentDidUpdate(prevProps, prevState, snapshot) 会在更新后会被立即调用。首次渲染不会执行此方法。
类似检测值变化调用接口可以在此处执行。
也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语句里
如果 shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()。

componentWillUnmount() 会在组件卸载及销毁之前直接调用。
清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等
componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。（不要用此方法阻止渲染，可以使用PureComponent）
返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
它应返回一个对象来更新 state，如果返回 null 则不更新任何内容

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。

componentDidCatch()在后代组件抛出错误后被调用

12.避免将 props 的值复制给 state（可以直接使用 this.props.color）

13.ReactDOM:import ReactDOM from ‘react-dom‘
ReactDOM.render(element, container[, callback])
在提供的 container 里渲染一个 React 元素，并返回对该组件的引用（或者针对无状态组件返回 null）。

ReactDOM.unmountComponentAtNode(container)
从 DOM 中卸载组件，会将其事件处理器（event handlers）和 state 一并清除。

findDOMNode()是一个访问底层 DOM 节点的应急方案（escape hatch）不推荐使用
大多数情况下，你可以绑定一个 ref 到 DOM 节点上，可以完全避免使用 findDOMNode

ReactDOM.createPortal(child, container)
提供一种将子节点渲染到 DOM 节点中的方式，该节点存在于 DOM 组件的层次结构之外。

14.当 <input> 组件的 type 类型为 checkbox 或 radio 时，组件支持 checked 属性。

15.由于 for 在 javascript 中是保留字，所以 React 元素中使用了 htmlFor 来代替。

16.React 依靠了onChange事件实时处理用户输入。

17.<option> 组件支持 selected 属性。

18.浏览器引擎前缀都应以大写字母开头，除了 ms。

19.React 会自动添加 ”px” 后缀到内联样式为数字的属性后。
如需使用 ”px” 以外的单位，请将此值设为数字与所需单位组成的字符串。

20.异步访问事件属性，你需在事件上调用 event.persist()，此方法会从池中移除合成事件，允许用户代码保留对事件的引用。

21.事件处理函数在冒泡阶段被触发。如需注册捕获阶段的事件处理函数，则应为事件名添加 Capture。