五一小长假自学React.js总结

Posted 2021-03-30 生锈的TRUENO

html界面由DOM树构成，React可以通过创建虚拟DOM和diff算法实现与DOM的高效交互（只改变被更新的DOM元素）。React可以通过先创建虚拟DOM元素，再将其挂载到某个真实的DOM元素，从而实现界面的渲染。创建虚拟DOM元素可以通过“React.creatElement”的方式，但是这样做比较麻烦，因此，可以通过html与js混合使用的jsx语言，直接用HTML代码写虚拟DOM，这就需要事先用babel进行转义。

React中最重要的思想就是组件，因为以组件的方式写UI可以更好的实现复用。创建组件的方式主要有两种，第一种是通过构造函数的形式，构造函数要返回一个合法的jsx虚拟DOM元素，构造函数的形参中可以通过“props”接受父组件传来的参数，这种方法创建的组件属于“无状态组件”，也就是没有自己的私有数据（state）和生命周期函数；第二种是通过class来创建组件，使用class定义组件，必须让自己的组件继承自React.Component，且在组件内部，必须有render函数，作用是渲染虚拟DOM结构，这种方式创建的组件属于“有状态组件”，也就是有自己的私有数据（state）和生命周期函数，这种方式比较常用。

用class创建组件实现了面向对象的思想，当子类继承父类并且子类具有父类不具有的成员函数时，需要在子类的constructor中首先调用super（），即父类的构造器引用，state是可读可写的私有数据，主要通过ajax获得，而props是只读数据，由父组件获得，对于state的修改需要用“this.setState”。

React有一套自己的事件绑定机制（小驼峰），且事件的处理函数只能是“function()”，这可以通过“()=>”这种匿名函数来实现。此外，与Vue的“v-model”这种双向数据流不同，React只提供单向数据流，也就是状态数据的变化可以在与之绑定的UI上动态显示，但是如果想实现UI界面上的数据与状态数据同步变化（即双向绑定）则需要程序员自己手动实现：在UI组件（比如文本框）中设置onChange事件，并监听，当事件触发时，将获取到的事件参数传递给回调函数，并在回调函数中，通过“this.setState”实现对状态数据的修改，从而实现双向数据绑定。

React使用css样式表需要事先配置webpack.config，并且css样式表默认的作用域是全局的，同样可以通过配置webpack.config实现css样式表的模块化，并且可以通过“:global”实现对某个样式的全局化。此外，自定义的css样式表需要更改为.scss文件，并在webpack.config中进行配置，因为除了自定义的样式文件外，还需要大量使用第三方样式表。