再读 React 官方文档

首先祝大家 1024 快乐,然后是最近在看的文档,毕竟最好的 React 学习资料还是官方文档。
第一次读 React 文档是为了会用,
第二次读,是为了学一些不常用的或者新的特性。 像 hook、HOC 等等
现在再读文档,我希望了解之前忽略的部分(如设计理念,规则,定义),完善对它的理解。

React 哲学

如何创建应用?

  1. 按照“单一功能原则”(即一个组件原则上只负责一个功能)将 UI 拆分组件层级

因为你经常是在向用户展示 JSON 数据模型,所以如果你的模型设计得恰当,UI(或者说组件结构)便会与数据模型一一对应,这是因为 UI 和数据模型都会倾向于遵守相同的信息结构。将 UI 分离为组件,其中每个组件需与数据模型的某部分匹配。

  1. 编写静态页面,最好将渲染 UI 和添加交互这两个过程分开,并且完全不应该使用 state 构建静态版本。
  2. 只保留应用所需的可变 state 的最小集合,其他数据均由它们计算产生。
  3. 确定 state 放置位置
  4. 添加反向数据流

渲染部分:

  • 元素一旦创建,就不能更改。所以要更新页面,只能创建新的元素并渲染。
  • React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新。
  • key 可以帮助 React 识别哪些元素改变了。

组件部分:

概念:UI 可以拆解为独立可复用的代码片段,这些代码片段就是组件。
分类:按声明方式分有函数组件、Class 组件,
行为:组件涉及的一些动作有, 渲染、组合、提取(拆分)
规则:

  1. React 组件都必须像纯函数一样保护它们的 props 不被更改。想一想,如果组件传入的 props 可以被随意更改,那么对于在多个地方复用的组件来说是灾难性的。
  2. 相对于 props 的不可更改,state 是私有的,并且完全受控于当前组件。
    1. 不要直接修改 state
    2. state 可能是异步的,所以可以给 setState 传入函数
    3. state 更新会被合并
  3. 数据流动是单向的,即自上而下。我的理解是父子组件关系像嵌套函数一样,外层取不到内层的参数,所以只能单向流动。

最佳实践:

  • 多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去。
  • 在 React 中没有“槽”这一概念的限制,你可以将任何东西作为 props 进行传递。
  • 在 React 中组件几乎用不到继承,使用组合和 props 足够应对各种情况。
  • 如果某个数据可以通过现有 state 和 props 得到,最好不要创建新的 state。

事件系统:

合成事件:即 SyntheticEvent 包装器, 兼容浏览器且提供浏览器原生事件的包装方法。其实例就是在 React 事件中默认传递的参数 e。

diffing 算法:

产生背景:渲染时 render 方法会产生一棵 React 元素树,在 state/props 更新时会产生新树,React 需要基于这两棵树之间的差别来判断如何有效率的更新 UI 以保证当前 UI 与最新的树保持同步。
算法基础理念:

  1. 两个不同类型的元素会产生出不同的树;
  2. 开发者可以通过 key prop 来暗示哪些子元素在不同的渲染下能保持稳定;

实现步骤:
从根部开始比较,

  1. 元素类型不同,则卸载老树元素及子元素,并开始建新树
  2. 元素类型相同,对比属性,属性值不同更新属性。处理完当前节点,递归子节点
  3. 组件类型相同,组件实例不变,更新 props,并调用 componentWillReceiveProps()componentWillUpdate() 方法。
  4. 对子节点递归时,如果节点列表中有 key 属性,则对比 key 值来决定是否新建元素。如果没有 key,React 会对新旧两个子元素列表逐个对比,有不同的话会重建元素。此时在向列表头部插入新元素时性能开销最大。

Hook 规则

  1. 只在顶层函数中调用 hook
  2. 只在 React 函数中调用 hook

hook 与 Class 组件功能对比:

Class 组件Hook
constructor 初始化 stateuseState
refuseRef
多个 state 传入const [state, setState] = useState({...})
shouldComponentUpdateuseCallbackReact.memo
componentDidMount, componentDidUpdate, componentWillUnmountuseEffect
getSnapShotBeforeUpdate, componentDidCatch, getDerivedStateFromError-
render函数组件本身
PureComponentuseMemo 多次渲染间缓存计算结果
context 深层传递 propsuseReducer
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页