围绕React的一些思考

声明式开发

• 相对于jquery这种命令式开发，react是面向数据编程的，减少了大量的DOM操作量。

可以与其他框架并存

通过react的入口文件index.js我们知道，react是把组件挂载到了ID为root的DOM节点下。

image.png

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

image.png
image.png

组件化

• react组件是通过class类集成 React.component来实现的定义的。
• react组件在代码里是首字母大写以标签形式使用的。
• 组件在整个应用中，应该是一个树形结构。

单向数据流

• 父组件可以向子组件传值，但是子组件只能使用这个值，不能直接去改变这个值，否则会报错。为什么这么做，很好理解，当多个子组件使用同一个数据的时候，如果其中一个子组件修改了父组件的数据，那么其他引用这个数据的子组件也会出现变化，当出现错误的时候，很难定位问题，代码调试非常不方便。

• 所以，子组件要修改父组件的数据，只能是通过父组件传递给子组件方法，然后子组件调用这个方法，去修改，实际上，最终还是父组件修改了自己的数据。

  
  image.png

视图层框架

如果按照父子组件传值的方法，当组件树很复杂的时候，组件间的传值就会变得非常复杂，所以大型项目光用React框架是不行的，我们还需要配合使用一些数据层的框架，帮我们解决组件间的复杂传值问题。
React把自己定义为视图层框架，并不是什么问题都解决，它只解决数据和页面渲染的工作。其他工作，交给其他工具来做。当然，如果是小型项目，我们借助react内部的传值机制就可以了。

函数式编程

在写react代码的时候，我们基本上都是在函数里写的，比如 constructor,render等等。
函数式编程带来了几个好处：

1. 维护起来比较容易，当一个函数比较大的时候，可以对它进行拆分。每个函数各司其职。
2. 方便做自动化测试。