声明式开发
- 相对于jquery这种命令式开发,react是面向数据编程的,减少了大量的DOM操作量。
可以与其他框架并存
通过react的入口文件index.js我们知道,react是把组件挂载到了ID为root的DOM节点下。

这个id为root的元素,是定义在public下的index.html里的,也就是说react的入口文件,只去管理id为root的div里的各种DOM的渲染。
如果这个时候,我们在id为root的div同级别,又定义了其他元素,假设这个元素我们是通过引入jquery框架控制的。那么这个时候jquery和react这两个库,是可以共存的。每个库只管理自己范围内的DOM,不会相互影响。


组件化
- react组件是通过class类集成 React.component来实现的定义的。
- react组件在代码里是首字母大写以标签形式使用的。
- 组件在整个应用中,应该是一个树形结构。
单向数据流
- 父组件可以向子组件传值,但是子组件只能使用这个值,不能直接去改变这个值,否则会报错。为什么这么做,很好理解,当多个子组件使用同一个数据的时候,如果其中一个子组件修改了父组件的数据,那么其他引用这个数据的子组件也会出现变化,当出现错误的时候,很难定位问题,代码调试非常不方便。
-
所以,子组件要修改父组件的数据,只能是通过父组件传递给子组件方法,然后子组件调用这个方法,去修改,实际上,最终还是父组件修改了自己的数据。
image.png
视图层框架
如果按照父子组件传值的方法,当组件树很复杂的时候,组件间的传值就会变得非常复杂,所以大型项目光用React框架是不行的,我们还需要配合使用一些数据层的框架
,帮我们解决组件间的复杂传值问题。
React把自己定义为视图层框架,并不是什么问题都解决,它只解决数据和页面渲染的工作。其他工作,交给其他工具来做。当然,如果是小型项目,我们借助react内部的传值机制就可以了。
函数式编程
在写react代码的时候,我们基本上都是在函数里写的,比如 constructor,render等等。
函数式编程带来了几个好处:
- 维护起来比较容易,当一个函数比较大的时候,可以对它进行拆分。每个函数各司其职。
- 方便做自动化测试。
网友评论