前言
这是我加入前端青训营笔记活动的第7天
React特性与简介
React是用于构建用户界面的JavaScript库，快速响应，适用于大型Web应用程序
React特点：
- 声明式，React采用声明范式，可以轻松描述应用。
- 组件化（把页面拆分成各个组件，支持JavaScript语法），通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中，复用性强
- 跨平台编写（依靠渲染器）
可以解决资源加载等待时间过长和浏览器单线程执行问题
Schedule（调度器）：维护时间切片、与浏览器任务调度、优先级调度
Reconciler（协调器）：将JSX（JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，建议使用）转化为Fiber、Fiber树对比、确定更新的Fiber
Renderer（渲染器）：用于管理一颗React树，使其根据底层平台进行不同的调用
Thinking in React
React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一，它在Facebook和Instagram上表现优秀。等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
优缺点
优点
快速响应：Fiber
组件化：复用性强
声明式编程
跨平台：只需修改渲染器
缺点
大型应用需要配套学习状态管理、路由工具
不适合小型应用，需要用babel处理
组件
Class组件
类组件是通过各种生命周期函数来包装业务逻辑的，这也是类组件所特有的。
- 继承+构造函数
- this
- 生命周期
- render
函数式组件
函数组件会更加的纯粹，简单，更利于测试，支持自定义hook，使用 Hooks 的函数组件可以提供比原先更细粒度的逻辑组织和复用，且能更好的适用于时间切片和并发模式
- 没有生命周期
- 借助Hook
- return JSX
组件和hook关系：贴近组件内部运行的各种逻辑概念
具体场景案例
拆分组件
父子组件通信
父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。
React.cloneElement() React.cloneElement()是React顶层API的一部分，用于操作元素。它克隆并返回一个新的元素，使用其第一个参数作为起点。这个参数可以是一个React元素或一个渲染React元素的组件。 新的元素特点：
- 原有元素的道具与新的道具浅浅地合并在一起
- 新的子元素取代现有的子元素
- 原元素中的key 和ref 被保留
当你想添加或修改一个父组件的子元素的道具时，React.cloneElement() ，同时避免不必要的重复代码。
React.forwardRef会创建一个React组件，这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中。
组件间共享信息
useContent
Context提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法，实现组件状态的穿透。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。
useReducer
使用 useReducer 能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。
useContext搭配useReducer实现组件状态共享
Redux
redux应该是react开发中一个进行统一状态管理的库，redux并非必须配合react去使用，它是可以单独使用去进行状态管理的
注：useReducer、useContext组合可以替代redux使用
组件性能优化
memo
count不变，counter不重新渲染，使用memo包一下
useMemo
count不变，不重新计算calcvalue
useMemo和useCallback都是reactHook提供的两个API，用于缓存数据，优化性能
-
useMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态
-
useCallback 缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；另外还需要注意的是，useCallback应该和React.memo配套使用，缺了一个都可能导致性能不升反而下降
