what is react?

Posted 2020-08-04

现在最热门的前端技术，毫无疑问就是React。

React起源于Facebook公司的内部项目，他们认为现在的MVC不能满足他们的扩展需求，由于他们的代码库非常庞大，组织也非常复杂，所以每当添加一个新的功能时就变得异常的复杂，所以他们为了解决这个问题，提出了React。

那么React是什么呢？ 其官网上说的是A javascript LIBRARY FOR BUILDING USER INTERFACES。一个Javascript库，用于构建用户界面。

React主要解决什么问题呢？

他们的官网上有这么一句话：We built React to solve one problem: building large applications with data that changes over time.

构建那些会随时间变化的大型应用。

在整个web的MVC架构中，你可以认为React是整个视图层，并且是一个高效的视图层。React提供了和以往不一样的看待视图层的方式，它以组件开发为基础。对于React而言，你的页面都是由一个个组件构成的，你可以通过分割组件的方式去实现复杂的页面或者某个功能模块。并且这些组件是可以被复用的。

React的另一大特点是：虚拟DOM节点。它让页面的渲染更加的高效，并且比直接操作真实DOM更加的可控。这两大特点使得React有了强大的渲染页面的能力。

Virtual DOM 虚拟DOM
传统的web应用，操作DOM一般是直接更新操作的，但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。就是Virtual DOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。

为什么通过这多一层的Virtual DOM操作就能更快呢？ 这是因为React有个diff算法，更新Virtual DOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。

Components 组件

在DOM树上的节点被称为元素，在这里则不同，Virtual DOM上称为commponent。Virtual DOM的节点就是一个完整抽象的组件，它是由commponents组成。

State 和 Render
React是如何呈现真实的DOM，如何渲染组件，什么时候渲染，怎么同步更新的，这就需要简单了解下State和Render了。state属性包含定义组件所需要的一些数据，当数据发生变化时，将会调用Render重现渲染，这里只能通过提供的setState方法更新数据。

组件的生命周期

一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。

实例化

当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：

1、getDefaultProps 
2、getInitialState 
3、componentWillMount 
4、render 
5、componentDidMount

getDefaultProps 
对于每个组件实例来讲，这个方法只会调用一次，该组件类的所有后续应用，getDefaultPops 将不会再被调用，其返回的对象可以用于设置默认的 props(properties的缩写) 值。

getInitialState 
对于组件的每个实例来说，这个方法的调用有且只有一次，用来初始化每个实例的 state，在这个方法里，可以访问组件的 props。

getInitialState 和 getDefaultPops 的调用是有区别的，getDefaultPops 是对于组件类来说只调用一次，后续该类的应用都不会被调用，而 getInitialState 是对于每个组件实例来讲都会调用，并且只调一次。

componentWillMount 
该方法在首次渲染之前调用，也是再 render 方法调用之前修改 state 的最后一次机会。

render 
该方法会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来讲，render方法是唯一一个必需的方法。

注意：render方法返回的结果并不是真正的DOM元素，而是一个虚拟的DOM.

componentDidMount 
该方法不会在服务端被渲染的过程中调用。该方法被调用时，已经渲染出真实的 DOM，可以再该方法中通过this.getDOMNode() 访问到真实的 DOM。

存在期

此时组件已经渲染好并且用户可以与它进行交互，比如鼠标点击，手指点按，或者其它的一些事件，导致应用状态的改变，你将会看到下面的方法依次被调用

1、componentWillReceiveProps 
2、shouldComponentUpdate 
3、componentWillUpdate 
4、render 
5、componentDidUpdate

 

componentWillReceiveProps 
组件的 props 属性可以通过父组件来更改，这时，componentWillReceiveProps 将来被调用。可以在这个方法里更新 state,以触发 render 方法重新渲染组件。

shouldComponentUpdate 
如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false 来阻止组件的重新渲染，返回 `false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。

componentWillUpdate 
这个方法和 componentWillMount 类似，在组件接收到了新的 props 或者 state 即将进行重新渲染前，componentWillUpdate(object nextProps, object nextState) 会被调用，注意不要在此方法中再去更新 props 或者 state。

componentDidUpdate 
这个方法和 componentDidMount 类似，在组件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM。

 

销毁时

componentWillUnmount 
每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 conponentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器。

当再次装载组件时，以下方法会被依次调用：

1、getInitialState 
2、componentWillMount 
3、render 
4、componentDidMount

 

 

 

文／RK_CODER（简书作者）
原文链接：http://www.jianshu.com/p/ae482813b791