React工作过程中的几点

虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。

为什么虚拟 dom 会提高性能?

   虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。

具体实现步骤如下：

1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
3. 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。
4. 把树形结构按照层级分解，只比较同级元素。

Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中，props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 Refs。

咱们可以在组件添加一个 ref 属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层 DOM 元素或组件的挂载实例。

      class UnControlledForm extends Component {
        handleSubmit = () => {
          console.log("Input Value: ", this.input.value)
        }
        render () {
          return (
            <form onSubmit={this.handleSubmit}>
              <input
                type='text'
                ref={(input) => this.input = input} />
              <button type='submit'>Submit</button>
            </form>
          )
        }
      }
  
 

请注意，input 元素有一个ref属性，它的值是一个函数。该函数接收输入的实际 DOM 元素，然后将其放在实例上，这样就可以在 handleSubmit 函数内部访问它。

经常被误解的只有在类组件中才能使用 refs，但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。

      function CustomForm ({handleSubmit}) {
        let inputElement
        return (
          <form onSubmit={() => handleSubmit(inputElement.value)}>
            <input
              type='text'
              ref={(input) => inputElement = input} />
            <button type='submit'>Submit</button>
          </form>
        )
      }
  
 

文章来源: zhulin1028.blog.csdn.net，作者：zhulin1028，版权归原作者所有，如需转载，请联系作者。

原文链接：zhulin1028.blog.csdn.net/article/details/124297859