React基础与实践小记 个人前言：把前端的一些基础学习后，就要选择一种前端框架去学习了，现在普遍使用的是vue框架和react框架，两者都学固然是最好，但是在时间有限的情况下，选择适合自己的一种框架也是一个不错的选择，当初在选择框架的时候，还纠结过选择vue还是react，问了一下身边的朋友，有前端经验的人都是推荐React框架，于是我最终选择了它。学习之后，发现React提倡的万物组件化这个概念确实不错，大大增加了代码的复用性，也更方便管理，相关资料、教程也详细，是学习开发的不二选择。
React三大特点： 声明式、组件化、跨平台编写
React 是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。它在 Facebook和Instagram上表现优秀。 等待资源加载时间和大部分情况下浏览器单线程执行是影响web 性能的两大主要原因。 等待资源加载 一次请求太多资源? 网络请求慢? 资源加载失败? 浏览器线程执行 JS执行、浏览器计算样式布局、UI绘制
优点 快速响应:Fiber；组件化:复用性强；声明式编程；跨平台:只需修改渲染器 缺点 大型应用需要配套学习状态管理、路由工具 不适合小型应用，需要用babel处理
React组件 ——Class 组件 继承＋构造函数 this 生命周期 render方法 ——函数式组件 没有生命周期 借助Hook return JSX
函数式相较于Class的优点 代码量骤减，组件干净清爽。没有复杂的生命周期。支持自定义hook，逻辑复用方便。 组件和 Hook的关系 我们将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子。 hook贴近组件内部运行的各种概念逻辑effect、state、 context等。hooks更贴切于电子。
Hook规则&原理 只能在最顶层使用Hook 只能在React函数中调用Hook
Hook过期闭包问题 在JS中，函数运行的上下文是由定义的位置决定的,当函数的闭包包住了旧的变量值时，就出现了过期闭包问题。
React常见 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——实现组件动态加载 React.Suspense——组件加载过程优雅降级
React常见 Hook.及作用 useState——返回一个state 及更新state 的函数 useEffect——可以让你在函数组件中执行某些操作，挂载时、依赖变化时甚至说卸载前。 useContext——接收最近的上层context对象，并返回其值，一般与createContext一起使用 useRef——返回一个可变的ref 对象，在组件生命周期内持续存在。 useMemo——参数为计算函数和依赖项，只有在依赖项变化时才调用计算函数。返回函数的计算值 useCallback——useCallback(fn，deps),相当于useMemo(() => fn, deps)，一般返回的是一个新函数。 useReducer——useState 的更丰富替代方案，返回[state，dispatch]，这里state可以是复杂对象，dispatch可以更新这个复杂对象。 uselmperativeHandle——可以给父组件暴露方法。一般与forwardRef一起使用 useLayoutEffect——useEffect的执行时机是浏览器完成渲染之后，而useLayoutEffect的执行时机是浏览器把内容真正渲染到界面之前，和componentDidMount等价。
