获得徽章 0
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
React 中，从 JSX 到页面经过了什么样的过程？
首先，通过 babel 将 JSX 编译成 JS 对象，然后通过 ReactDOM 的 render 方法构造 DOM 树，并插入到页面某个特定元素上。
那么，为什么要先编译成 JS 对象，然后再构造 DOM 树，而不是从 JSX 构造 DOM 树呢？
一方面，JSX 表示的是 UI 的结构和信息，但是它不一定就要渲染到浏览器的页面上，它还可以渲染到其他设备如手机 APP 中。将 react-dom 解耦出来，可以提升 JSX 的复用性。例如，使用 ReactNative，我们可以将相同的 JSX 结构渲染成原生 APP。
另一方面，当数据变化需要更新组件时，可以用比较快的算法直接操作这个 JS 对象，而不用直接操作页面上的 DOM。这样可以尽量减少浏览器重排，从而提升渲染性能。
首先，通过 babel 将 JSX 编译成 JS 对象，然后通过 ReactDOM 的 render 方法构造 DOM 树，并插入到页面某个特定元素上。
那么，为什么要先编译成 JS 对象，然后再构造 DOM 树，而不是从 JSX 构造 DOM 树呢？
一方面，JSX 表示的是 UI 的结构和信息，但是它不一定就要渲染到浏览器的页面上，它还可以渲染到其他设备如手机 APP 中。将 react-dom 解耦出来，可以提升 JSX 的复用性。例如，使用 ReactNative，我们可以将相同的 JSX 结构渲染成原生 APP。
另一方面，当数据变化需要更新组件时，可以用比较快的算法直接操作这个 JS 对象，而不用直接操作页面上的 DOM。这样可以尽量减少浏览器重排，从而提升渲染性能。
展开
评论
27
赞了这篇沸点
推荐一个很好的文章，讲解了React的function component与class component最大的一个区别。我来简单的总结一下：
1. 在React中，每一次渲染都是独立的。对于函数组件而言，它在某一次渲染时所能访问到的变量只与那一次的渲染环境有关。因此，如果你执行了异步操作，并且外部更新了props，异步操作最后访问到的是触发异步操作时的环境变量(旧的Props)。
2. props是不变的。因此，组件的每一次渲染访问的props都是不同的。由于类组件是通过this.props的形式来访问props的变量的，props是不变的，可是this.props是变化的，每一次都会指向最新的props。因此，相同情况下，类组件会访问到最新的值。
3. 对于React hooks而言，也会有这个问题。由于每一次渲染都是独立的，因此，如果你在异步操作里访问useState或者传入的props的值，取到的是触发异步操作时的那次渲染的值，而不是最新的。如果想一直访问最新的，可以使用ref的方式或者把异步操作放到useEffect里，将依赖项写在useEffect的第二个参数里。
1. 在React中，每一次渲染都是独立的。对于函数组件而言，它在某一次渲染时所能访问到的变量只与那一次的渲染环境有关。因此，如果你执行了异步操作，并且外部更新了props，异步操作最后访问到的是触发异步操作时的环境变量(旧的Props)。
2. props是不变的。因此，组件的每一次渲染访问的props都是不同的。由于类组件是通过this.props的形式来访问props的变量的，props是不变的，可是this.props是变化的，每一次都会指向最新的props。因此，相同情况下，类组件会访问到最新的值。
3. 对于React hooks而言，也会有这个问题。由于每一次渲染都是独立的，因此，如果你在异步操作里访问useState或者传入的props的值，取到的是触发异步操作时的那次渲染的值，而不是最新的。如果想一直访问最新的，可以使用ref的方式或者把异步操作放到useEffect里，将依赖项写在useEffect的第二个参数里。
展开
2
5
赞了这篇文章
赞了这篇文章