这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天。React源于Facebook内部项目，是目前比较火的框架之一，使用React可以提升开发者的开发体验。
React特点
就自己为言感觉React更像是组件化思想，通过一个一个的组件，相互拼接嵌套，完成页面的渲染，较少的与DOM进行交互，减少代码的复用。
- 声明式——以声明式编写UI。
- JSX——JSX是JavaScript的语法扩展。
- 高效——React通过对DOM的模拟，最大限度的减少DOM的交互。
- 组件——通过React构建组件，减少代码的复用。
- 单响应的数据流——React实现了单响应的数据流，从而减少了重复代码。
组件的生命周期
每个组件都有自己的生命周期，在生命周期中会有不同的状态，不同的状态下会有对应的钩子函数，借助钩子函数可以针对组件某个生命状态下完成某些任务。
一句话钩子（hook）就是React函数组件的副效应解决方案，用来为组件引入副效应。，可以加入我们自己的逻辑和操作。
生命周期的关键节点
- 挂载时：
constructor、static getDrivedStateFromProps、render()、componentDidMount() - 更新时：
static getDrivedStateFromProps、render()、componentDidUpdate等 - 卸载时：
componentWillUnmount
组件生命周期图谱
props和Context
我们知道React是组件化思想，那么当子组件需要使用带父组件的数据时或者，子组件的子组件（孙子）需要使用到父组件的数据时，由或者孙子组件需要使用到父组件而子组件不需要父组件的数据该如何做呢？
props
子组件使用父组件的数据时，是由父组件通过props传递数据给子组件，自上而下。
/*函数的组件props*/
return (
<div>
<Son content="我是父组件传递的数据"/>
</div>
)
export default function Son(props){
return (
<div>
<h1>子组件</h1>
<p>{props.content}</p>
</div>
)
}
Context
当孙子组件需要父组件的内容而子组件不需要时,Context提供了一种方法无需为每层组件手动添加props，就在组件树间进行数据的传递。
Hook和路由
Hook
Hook可以“钩入”React state及生命周期等特性。注意不要在循环，条件，嵌套函数中调用Hook。
export default function Counter(){
var [count,setCount]=useState(0)
return (
<div>
Hook<button onclick={()=>setCount(count+1)}>变量 </button>
<p>count:{count}</p>
</div>
)
}
路由
React Router是一个路由库，可以通过Router在应用中快速添加视图和数据流，同时保持页面与URL的同步。
react-Router：为React-Router提供核心的路由功能react-router-dom:包含react-router的所有功能且增加了适合在浏览器运行环境的一些功能。
总结
React是目前比较火的框架，对于react而言我有些体会到了它的优势，组件可以减少复用代码，这个是很明显的，可扩展性和维护性好，由于都是组件所以维护和扩展功能可以减少与其他模块的耦合。
