对React的三大特性实战的深入理解与运用心得

​

React的三大特性

声明式编程

命令式编程与声明式编程：

简而言之，命令式编程是告诉计算机通过代码做什么。

声明式编程是通过代码告诉计算机你想做什么，这样计算机就可以知道怎么做。

生活中的一个例子是：

命令编程：我想喝一杯冰可乐，然后我会对我周围的XXX说：“XXX，去厨房，打开冰箱，拿出一瓶冰可乐，打开并寄给我。”

声明式编程：我想喝一杯冰可乐，然后我会对我周围的XXX说：“XXX，我想喝杯冰可乐。”我不在乎他是如何得到冰可乐的，他是如何发送的，他到底是在楼下买的还是放在冰箱里的。我只关心我对冰可乐的需求是否满足。

以代码为例：

const container = document. getElementById ( "container" );
const btn = document.createElement ("button");

btn.className = "btn red " ;
btn.textContent = "Demo" ;

btn.onclick = function ( ) {
    if ( this.classList.contains ( "red" ) ) {
        this.classList.remove( "red" );
        this.classList.add ( "blue" );
    }else {
    this.classList.remove( "blue" );
    this.classList.add ( "red" );
    }
};
container.appendChild( btn);      

如果我想在界面上显示一个按钮，然后单击该按钮，按钮的类将被更改。

Dom编程编写的代码是命令式编程：首先，需要命令浏览器。第一步是找到ID为容器的节点，然后创建一个按钮元素，然后向按钮添加一个类名，然后添加一个单击事件，最后将按钮添加到容器节点。整个过程的每一步都是必不可少的，一步一步地告诉浏览器该做什么。

class Button extends React. Component {
    state = { color: "red" };
    handleChange =()=> {
        const color = this.state.color == "red" ? "blue" : "red" ;this.setState({ color });
    };
    render( ) {
        return (
        <div id="container">
            <button
                className={ `btn ${this.state.color}` }
                onclick={this.handleChange}
            >
                Demo
            </button>
        </div>
     );
    }
}      

为了实现相同的功能，使用声明式编程进行react要简单得多。

首先，我们定义一个按钮组件。在render函数中，通过返回类似于HTML的数据结构，我们告诉react我想要呈现一个按钮，它是一个具有ID容器的子节点。按钮上的类名会动态更改。单击按钮时，类将更改。这就是全部。至于何时执行渲染，如何将其渲染到页面，以及单击按钮后如何更新类名，您无需关心。您只需要告诉react您希望当前UI处于何种状态。

组件化

React提供了一个新的语法扩展JSX。JSX创造性地结合了呈现逻辑和UI逻辑，这种组合在react中称为组件。一个页面由多个组件组成，甚至整个应用程序都可以被视为一个组件，它只是最大的组件。组件可以逐层嵌套。一个组件可以由多个组件组成。大部件由许多小部件组成，这些小部件也可以由较小部件组成。同一部件可用于不同的地方。

一次学会，随处编写

这句话的意思不是说你可以写你想写的东西，也不是说你想写一次就可以在任何地方运行，而是说你可以使用react语法在很多地方编写代码，比如用react DOM编写网页，用react native编写移动客户端应用，用React360开发VR界面。

react的灵活性取决于其自身的定位。React是一个用于构建用户界面的JS库。对于react，这里的用户界面是一个抽象的虚拟用户界面，实际上是一个描述页面状态的数据结构。网页、移动客户端页面和VR界面都是用户界面。只要使用相应的渲染器，就可以在不同的平台上显示正确的UI界面。

一般来说，我们可以将react的执行结果想象为视频文件数据。在不同的播放器设备中，我们通过转换器将视频编译成不同的格式，让它们在不同播放器上正常播放。因此，在web端编写react时，我们需要另外引入react DOM来进行渲染。

虚拟DOM的创建

创建虚拟DOM的两种方法

纯JS模式（通常不使用，太麻烦）

JSX模式（简单方便，最终由Babel翻译成JS，与JS编写的结果相同）

虚拟Dom和真实Dom

React提供了一些API来创建一个“特殊”通用JS对象

const VDOM = React.createElement('xx',{id:'xx'},'xx')///依次为标签名，标签属性和标签内容      

在编码时，我们只需要操作react的虚拟DOM相关数据，react就会转换成真实的DOM

虚拟DOM概述：

本质上为object类型的对象（一般对象）

虚拟DOM是“轻”的，而真实DOM是“重”的，因为虚拟DOM在react中内部使用，并且不需要在真实DOM上有太多属性

虚拟DOM对象最终将通过react转换为真实DOM，并显示在页面上

模块与组件，模块化与组件化的理解

模块

理解：外部提供特定功能的JS程序通常是JS文件

为什么拆分为模块：因为随着业务逻辑的增加，代码变得越来越复杂

功能：取JS，简化JS编写，提高JS运行效率

组件

理解：用于实现本地函数（HTML/CSS/JS/image等）的代码和资源的集合

为什么一个接口的功能如此复杂，以至于不可能将其写在一块中？它应该写成碎片，然后放在一起

功能：重用编码，简化项目编码，提高运营效率

模块化

当一个应用的js都是以模块来编写，这个应用就是一个模块化的应用

组件化

Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}      

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number. 
}      

myRef = React.createRef() ;
<input ref={this.myRef}/>