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

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

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

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

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

发表评论

邮箱地址不会被公开。 必填项已用*标注