响应式系统与React|青训营笔记

这是我参与「第四届青训营」笔记创作活动的第5天

今天学习的是react框架，是前端几个重要的框架之一

  关于React的历史就不详细的讲述了，它是由Jordan Walke创造了FaxJs演变而来的，最后由
Facebook开源了React供大家使用。
  开源之后程序员就开发了各种React的新工具来方便人们使用。

React是如何被创造的呢？为什么要创造React呢？

创造React主要是由于原生的JS在某些方便使用起来不是很方便，有时候还很困难很繁琐，例如在原生的JS中

状态更新，UI不会自动更新，需要手动地调用DOM
欠缺基本的代码层面的封装和隔离，代码层面没有组件
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell”。

所以为了使JS更方便的使用，更好的服务于程序员，所以开发了React，React解决了上述问题，例如组件化减少了代码的重复，提高了代码的利用效率。同样的解决了状态更新的问题。

React是如何的去解决上述的问题呢？

状态更新

  例如在类式组件中，所有的状态都储存在state中，如果需要去改变状态，只需要去调用
this.state()函数即可。当然React还提供了其他函数，在不同的时候浏览器会自动的调用这些函
数。下图中就是React提供的各种函数供程序员操作。

组件化

  在React中将代码进行封装组件化，组件声明了状态和UI的映射。
组件有Props/State 两种状态。(state是储存自己的状态，props是接收其他组件传过来的数
据。)
“组件”可由其他组件拼装而成。(这就是React的组件化，将每一个功能都分成小的一个组件，
这样可以减少代码之间的重复率，提高效率)

数据的传递

  React使用props去接收其他组件传递过来的参数。

如何去传递参数呢？

只需要在组件中直接写，例如

<App name={this.state.name}> 这样就可以将本组件中的name的内容传递给App组件，在App组件中使用props来接收传过来的参数。

总结

关于React，虽然之前学习过一点相关的知识，但是经过今天的学习发现了自己还有很多的不足，例如，自己只是去学习相关的用法，并没有去认识并学习React的某些不足之处。