zoukankan      html  css  js  c++  java
  • React 高级指南小记

    接上篇,还是笔记,还是干货。

    深入 JSX

    如果使用 JSX 表达式 <Foo />Foo 必须在范围内,因为这些标签被编译为对指定变量的直接引用。

    由于 JSX 编译为对 React.createElement() 的调用,因此 React 库必须始终在 JSX 代码的作用域中。

    可以使用 JSX 中的点表示法来引用 React 组件。如果有一个模块导出很多 React 组件,这很方便。

    用户定义的组件必须以大写开头。

    当构建通用容器时,扩展属性可能很有用。然而,扩展属性很容易将大量不相关的属性传递给不关心它们的组件。建议谨慎使用扩展属性。

    在包含开始标记和结束标记的 JSX 表达式中,这些标记之间的内容作为特殊的属性 this.props.children 传递。

    React 组件不能返回多个 React 元素,但是一个 JSX 表达式可以有多个子元素。因此,如果想要一个组件呈现多个元素,可以将它包装在 div 中。

    传递给自定义组件的子项可以是任何东西,只要该组件将它们转换为 React 在渲染之前可以理解的东西即可。

    一些“假”值,仍然会被 React 渲染。

    使用 PropTypes 进行类型检查

    出于性能原因,仅在开发模式下检查 propTypes。

    Refs 和 DOM

    ref 属性接受一个回调函数,回调将在组件被挂载或卸载后立即执行。

    当组件装载时,React 将使用 DOM 元素调用 ref 回调,并在卸载时用 null 调用它。

    当在自定义组件上使用 ref 属性时,ref 回调接收组件的已装入实例做为其参数。

    不受控制的组件

    在大多数情况下,建议使用受控组件来实现表单。在受控组件中,表单数据由 React 组件处理。不受控组件的表单数据则是由 DOM 本身处理。

    要编写不受控制的组件,而不是为每个状态更新编写事件处理程序,可以使用 ref 从 DOM 获取表单值。

    由于不受控制的组件在 DOM 中保持真实源,因此,当使用不受控制的组件时,有时更容易集成 React 和非 React 代码。

    优化性能

    在某些情况下,可以通过重写生命周期函数 shouldComponentUpdate() 来提升性能,这是在重新呈现过程开始之前触发的。如果在某些情况下组件不需要更新,可以从 shouldComponentUpdate() 返回 false,以跳过整个渲染过程。

    大多数时候,可以继承 React.PureComponent 而不是编写自己的 shouldComponentUpdate() 来进行浅比较。

    如果仅仅是修改属性或状态内的实例的变量,而不是通过创建一个新的实例去覆盖它,那么 shouldComponentUpdate() 将不能正常工作。

    Reconstruction

    当根元素类型不同时,React 将拆除旧树并从头开始构建新树。

    当 DOM 元素类型相同时,React 会查看两者的属性,保留相同的底层 DOM 节点,并仅更新更改的属性。当更新样式时,React 也知道只更新已更改的样式属性。处理 DOM 节点后,React 然后对子节点进行递归。

    当组件元素类型相同时,实例保持不变,因此,在渲染之间维护状态。React 更新底层组件实例的属性以匹配新元素,并在底层实例上调用 componentWillReceiveProps()componentWillUpdate()。接下来调用 render() 函数,然后对子节点进行递归。

    当对 DOM 节点的子节点进行递归时,React 只是同时迭代两个子节点列表,并在有差异时产生变化。当子节点有 key 时,React 使用键将旧树中的节点和新树中的节点进行匹配。

    Context

    通过组件树传递数据,不必在每个级别手动传递属性,可以在 React 中使用强大的 context API 来做到这一点。

    绝大多数情况下不需要使用 context。

    context 是一个实验性的 API,可能会在未来的版本中取消。

    通常建议使用诸如 Redux 之类的状态管理库,而不是使用 context。

    最后

    源码:https://github.com/chnhyg/react-demo

  • 相关阅读:
    初探并行线程的三种写法
    Revit2017二次开发-打印机配置
    test错误记录
    自行车出租系统错误集2
    错误记录-spring+mybatis
    Windows(64位IIS)未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序
    sqlDeveloper连接oracle
    Apriori算法-java
    Apriori算法-位运算-C语言
    Apriori算法-数组-C语言
  • 原文地址:https://www.cnblogs.com/chnhyg/p/6115423.html
Copyright © 2011-2022 走看看