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