[React基础与实践|前端青训营笔记]
- React 简介与特性
- React 更新流程
- class 组件和类组件
- hook 规则
- 常见 API 讲解
- 业务场景案例
REACT是用IAVASCRIPT构建快速响应的大型web应用程序的首选方式之一。它在facebook和instagram上表现优秀。等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
缺点：
- 大型应用需要配套学习状态管理、路由工具
- 不适应小型应用，需要用babel处理
函数式组件：
- 没用生命周期
- 借助hook
- returnJSX
函数式相较于class的优点： 1.代码量骤减，组件干净清爽。 2.没有复杂的生命周期。 3.支持自定义hook，逻辑复用方便。
组件和hook的关系： 1.将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子。 2.hook贴近组件内部运行的各种概念逻辑，effect\state\context等。hooks更贴近于电子。
常见API及作用：
- React.Component：类组件基类 extends
- React.PureComponent：未实现shouldComponentUpdate()，内置了 props 和 state
- React.memo：高阶组件，仅比较 props 变更
- React.createElement：创建并返回 React 元素，不使用 JSX 场景
- React.cloneElement：克隆并返回新 React 元素，并且可以为新元素添加额外 props
- React.Children.[ Fn ]：map 遍历并返回； forEach 仅遍历； count 子组件数量; only 是否只有一个子节点
- React.createRef：创建一个 ref ，并附加到具体元素上， class 组件中获取 dom 结构常用
- React.forwardRef：转发 ref 或者与 useImperativeHandler 联合使用暴露方法
- React.lazy：实现组件动态加载
常见Hook及作用：
- useState：返回一个 state 及更新 state 的函数
- useEffect：可以让你在函数组件中执行某些操作，挂载时、依赖变化时甚至说卸载前。
- useContext：接收最近的上层 context 对象，并返回其值，一般与 createContext 一起使用
- useRef：返回一个可变的 ref 对象，在组件生命周期内持续存在
- useMemo：参数为计算函数和依赖项，只有在依赖项变化时才调用计算函数。返回函数的计算值
- useCallback：useCallback (fn,deps),相当于useMemo (()=> fn , deps)，一般返回的是一个新函数。
- useReducer：useState的更丰富替代方案，返回[ state , dispatch ]，这里state可以是复杂对象，dispatch可以更新这个复杂对象。
- useLayoutEffect：useEffect的执行时机是浏览器完成渲染之后，而useLayoutEffect的执行时机是浏览器把内容真正渲染到界面之前，和componentDidMount等价
