React入门（一）：Why React

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

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

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

const element = <h1>Hello, world!</h1>;  //将一个常量定义为元素的形式
ReactDOM.render(element, document.getElementById('root'));  //将一个元素渲染到root这个结点上

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

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

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

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

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

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

7、灵活：能够配合其他框架共同使用，比如JQuery等等。

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

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

另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog