这是我参加第五届青训营伴学笔记创作活动的第13天。
React的设计思路
数据响应式
使用原生JS的Web API来进行UI编程的时候，通常需要先写计算状态的代码，然后再通过查找DOM元素更新UI，这样的代码编写非常麻烦并且冗长，没有组件化概念，并且UI之间可能会有数据依赖关系，如果依赖过长，会遇到回调地狱问题。
而响应式编程使数据变为响应式数据，数据更新的时候，UI会自动更新，并且引入组件化概念，代码可以进行复用、封装，状态之间的数据依赖，只需要声明即可。
例如：数据x, y, z, z = x + y，当x和y变化的时候，z也会跟着变化，并且自动更新使用z数据的UI，而在代码层面上，只需要声明这3个变量，并且声明z与x和y的关系，大大缩短了代码长度，并且能够进行复用。
组件化
React将页面的UI分为一个个组件，通过组件组合成页面，组件之间也可以是简单的html标签，成为原子组件，也可以由其他组件组合，成为一个大的组件，这个组件与其组合成的组件成为父子关系。组件有Props和State两种状态，State是与组件自身有关的数据，而Props是通过父组件传递过来的值给自己状态赋值的数据，Props是父组件向子组件通信的核心。
一个页面，可以分为很多个部分，例如顶部导航，内容等，这些可以被称为组件，而这个页面可以被看成是一个大的组件。
React Hooks
React hooks是为函数组件赋予生命周期特性而设计的函数，使得使用函数组件时能像类组件的生命周期特性。
useState
useState是定义数据的时候使用的函数。通常写法如下：
// data为要定义的数据
const [state, setState] = useState(data);
// 通过setState可以改变state的值，并且React会监听到它的变化来更新UI
关于useState的使用详细说明：使用 State Hook – React (docschina.org)
useEffect
useEffect是类似在类组件中componentDidMount和componentDidUpdate两个生命周期的函数，会在每次组件渲染之后都会执行一次，常用于处理状态更新导致的副作用（组件外部的改变）。
useEffect传递2个参数，第一个是一个函数，用来处理副作用，第二个是一个可空的数组，用来指定执行的时机。
关于useEffect的使用详细说明：使用 Effect Hook – React (docschina.org)
状态管理库
使用组件化开发时，难免会有一些组件，需要使用一些共享的数据，例如用户名，用户资料等等，这个时候可以使用状态管理库将需要共享的状态抽离到UI外部进行统一管理。
状态管理库相当于一个最外层的state，它所存储的状态可以给下面所有的子组件使用，并且在状态修改之后在其他使用到该状态的组件也会进行更新。
总结
React组件化的出现，给编写UI带来了极大的f'bian
