Please enable JavaScript.

Coggle requires JavaScript to display documents.

react高级指导 (关于与Dom结合 (深入JSX (特点 (react必须在作用域中, 在jsx类型中使用点语法, 3…

- - - - react必须在作用域中
      - 在jsx类型中使用点语法
      - 3.用户定义的组件必须以大写字母开头
      - 4.在运行是选择类型，通用表达式必须首字母大写
    - - javascript表达式作为props
      - 字符串字面量可以赋值给prop
      - Props默认值为"True"
- - - - import（）
      - react.Lazy
        
        lazy目前只支持默认导出(default export),如果想把被引入的模块命名导出。可以创建一个中间模块来重新导出为默认模块，可以保证tree shaking不会出错，而且不必引入不需要的组件
        
        异常捕获边界
        
        基于路由的代码分割（react.lazy + React.router)
      - Loadable Components 这个库
  - - - static getDerivedStateFromError()
      - componentDidCatch()
    - - 制作一个包裹错误的组件，使用组合模式，把内部的组件当成子组件，当没有错的时候渲染,而当出现错误的时候，在生命周期函数中更改状态使得页面报错，如果没有出现错误，则渲染子组件。
    - - 可以放在最顶层的路由组件上
  - - - 使用 Chrome Performance 标签分析组件？
      - 使用开发者工具中的分析器对组件进行分析
    - - 虚拟化长列表
      - 避免调停
      - shouldComponentUpdate
      - 大部分情况下，你可以使用 React.PureComponent 来代替手写 shouldComponentUpdate。但它只进行浅比较，所以当 props 或者 state 某种程度是可变的话，浅比较会有遗漏，那你就不能使用它了
      - 不可变数据的力量
      - 最佳体验是用PureComponent和不可变数据来进行优化的更新(...扩展符)，如果我们不改变原来的对象(immutable)，我们可以是使用Object.assign方法
- - - - createContext
        
        创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值
        
        相当于创建一个喷泉眼，流出原始数据
      - Context.Provider
        
        每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。
        
        相当于给喷泉眼设置地点
      - Class.contextType
        
        挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中。
        
        相当于中间截流，在一个离新组件最近的地方新开一个泉眼，覆盖住那个远的喷泉的影响。
        
        可以使用 static 这个类属性来初始化你的 contextType
- - - - 不要在render方法中使用HOC，
- - - - 比对同一类型的元素
        
        当对比两个相同类型的Reatc元素时，React会保留Dom节点，金币对及更新有改变的属性
      - 比对不同类型的元素
        
        当根节点为不同类型的元素时，React 会拆卸原有的树并且建立起新的树
      - 比对同类型的组件元素
        
        当一个组件更新时，组件实例保持不变，这样 state 在跨越不同的渲染时保持一致。React 将更新该组件实例的 props 以跟最新的元素保持一致，并且调用该实例的 componentWillReceiveProps() 和 componentWillUpdate() 方法。
      - 对子节点进行递归
        
        在默认条件下，当递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表；当产生差异时，生成一个 mutation
    - - 在当前的实现中，可以理解为一棵子树能在其兄弟之间移动，但不能移动到其他位置。在这种情况下，算法会重新渲染整棵子树
      - 性能损耗的情况
        
        该算法不会尝试匹配不同组件类型的子树。如果你发现你在两种不同类型的组件中切换，但输出非常相似的内容，建议把它们改成同一类型。在实践中，我们没有遇到这类问题
        
        Key 应该具有稳定，可预测，以及列表内唯一的特质。不稳定的 key（比如通过 Math.random() 生成的）会导致许多组件实例和 DOM 节点被不必要地重新创建，这可能导致性能下降和子组件中的状态丢失