在正式学习 React 之前&＃xff0c;我们必须知道 React 的特性以及它是否真的适合我们&＃xff0c;必须弄明白&＃xff0c;为什么我们选择用 React 开发项目而不是 Vue 或者 Angular。接下来我就简单地说一说 React 的特性以及优缺点。

1、声明式开发&＃xff1a;像原生的 JS 和 JQuery 那样频繁对 DOM 进行操作的开发方式称之为命令式开发。而 React 颠覆了这一方式&＃xff0c;React 中几乎没有对 DOM 的直接操作&＃xff0c;而是通过操作数据&＃xff0c;当元素的状态发生改变时&＃xff0c;React 会自动渲染&＃xff0c;相当于自动帮你进行了 DOM 操作&＃xff0c;大大地提升了开发效率。

2、JSX&＃xff08;Javascript XML&＃xff09;&＃xff1a;JSX 是一种Javascript的语法扩展&＃xff0c;其表现形式为JS与HTML的混合使用。JSX 会被 Babel 编译为Javascript&＃xff0c;且在编译过程中就能够发现错误&＃xff0c;所以安全性较高&＃xff0c;能够防范部分XSS等攻击手段。JSX的执行速度很快&＃xff0c;因为它在编译为 Javascript 代码后进行了优化。Javascript 和 HTML 混合使用的模式&＃xff0c;在熟悉了之后还能够大大提高开发效率。

const element &＃61;

Hello, world!

3、虚拟DOM&＃xff1a;虚拟DOM是在DOM的基础上建立一个抽象层&＃xff0c;其实质是一个Javascript对象&＃xff0c;当数据和状态发生了变化&＃xff0c;都会被自动高效的同步到虚拟DOM中&＃xff0c;最后再将仅变化的部分同步到真实的DOM中。

直接且频繁地对DOM进行操作会引起浏览器的Reflow、Repaint&＃xff0c;会大大降低渲染性能&＃xff0c;耗费大量的时间。如果不懂Reflow和Repaint&＃xff0c;可以看看我之前的简述。
https://mu-mu.cn/blog/index.php/2020/07/22/1621/

而虚拟DOM&＃xff0c;是一个存储于内存中的Javascript对象&＃xff0c;React先将页面发生的变化更新到虚拟DOM&＃xff0c;每一次的变化都和上一次虚拟DOM的状态进行比较&＃xff0c;找到变化的部分&＃xff0c;最终Raect会将包含了所有变化的虚拟DOM与真实DOM进行比较&＃xff0c;找到DOM发生变化的部分&＃xff0c;一次性应用到DOM上&＃xff0c;从而提高页面渲染速度与性能。
一句话简要描述就是&＃xff0c;减少对真实DOM的操作次数。

4、组件化&＃xff1a;组件化是 React 的核心&＃xff0c;将一个复杂的页面按照需要拆分成一个个小的组件&＃xff0c;小组件还能拆分成更小的组件&＃xff0c;各个组件维护自己的状态和UI。当组件的状态改变时&＃xff0c;React 会自动渲染相应的组件&＃xff0c;而不是重新渲染整个页面。通过组件化&＃xff0c;各个组件之间的耦合度大大地降低了&＃xff0c;相互通讯变得便捷高效&＃xff0c;而且组件还能够重复使用&＃xff0c;代码复用性高&＃xff0c;可维护性强。

5、单向数据流&＃xff1a;在 React 中&＃xff0c;数据的组织形式是树状的&＃xff0c;由上至下单向流动&＃xff08;对应DOM树&＃xff09;。数据能够从父组件轻易地到子组件&＃xff0c;但是反过来就不那么容易了&＃xff0c;且子组件只能使用父组件传递过来的数据&＃xff0c;不能修改。如果子组件要传值给父组件&＃xff0c;或者要修改父组件的代码&＃xff0c;都只能通过父组件传递过来的方法实现。

6、函数式编程&＃xff1a;函数是编程是一种设计思想&＃xff0c;总的来说就是用尽量用函数组合来进行编程&＃xff0c;并将函数封装&＃xff0c;重复使用&＃xff0c;像组件一样。像只是进行页面的展示和数据的渲染&＃xff0c;没有逻辑处理的无状态组件就可以用函数组件实现。

7、灵活&＃xff1a;能够配合其他框架共同使用&＃xff0c;比如JQuery等等。

8、视图层框架&＃xff1a;React是MVC中的 View 层&＃xff0c;如果要构建大型的复杂应用&＃xff0c;还需要配合其他的框架或者库来实现&＃xff0c;如用 Redux 专门管理状态、用 Axios 发送请求等等。这也体现了 React 的灵活性。

以上就是 React 比较显著的几个特点&＃xff0c;当然还有很多很多特点是我还没有提到的&＃xff0c;也有很多我虽然提到了&＃xff0c;但只是简单带过了&＃xff0c;有需要的话还是得自己再去学习学习呀&＃xff01;好了&＃xff0c;看到这里&＃xff0c;是不是感觉手痒痒的了&＃xff0c;很想拿看起来很棒的 React 写点什么了呀&＃xff01;我个人感觉&＃xff0c;React 在三大前端框架中是最优秀的&＃xff0c;不过想要入门和精通的成本自然也是略高的&＃xff0c;如果是第一次接触框架&＃xff0c;那可能 Vue 上手的会更快&＃xff0c;不过对于追求性能和开发体验的小伙伴来说&＃xff0c;React 真真是极好的呀&＃xff01;