React-组件渲染和更新的实现

最新推荐文章于 2026-05-14 06:13:01 发布

原创

最新推荐文章于 2026-05-14 06:13:01 发布 · 1.7w 阅读

标签

#React #渲染 #更新

收录于

本文探讨了React中组件的渲染和更新过程，包括文本、原生标签和自定义标签的处理。在渲染时，React通过map方法将组件分为三类并进行相应操作。在更新阶段，React使用diff算法和patch方法来处理文本、原生标签和自定义标签的变更，确保高效地更新DOM。此外，还强调了setState方法仅更改组件状态，不直接触发更新，而需要重新渲染。

最近一直写React，慢慢就对里面的一些实现很好奇。最好奇的就是自定义标签的实现和this.setState的实现。这里不分析JSX是如何解析的，所有组件都用ES5方式编写。

组件渲染

渲染时候，我们会调用render方法。类似下面这样：

var SayHi = React.createClass({
  getInitialState: function() {
   
   
    return {verb: 'say:'};
  },
  componentWillMount: function() {
   
   
    console.log('I will mount');
  },
  componentDidMount: function() {
   
   
    console.log('I have mounted');
  },
  render: