react 实践总结

• 组件的export default 必须指定具名函数，即不能是匿名函数。因为匿名函数会导致react在渲染时重复构建函数。

• useState：变量--结果。useReduce：变量--过程--结果

• 从内存，函数，函数继承 的角度上看待 Hooks。

useState，useEffect，useReduc等都是 为react组件提供一系列引用内存用于存储/监听内存值得变化并触发对应的react组件更新。
这里有两个隐藏的知识。dom文档是一个互补干扰树形结构，那么对应react的组件而产生的Hooks在整个应用中也是树形结构。即每个组件的的Hook都是独立的一个内存空间。这也是Vue中data函数返回的是一个对象。

• 每个Hooks都是一个函数，而函数在每次执行的时候都会重新返回值。但组件在每当有响应数据变化时都会重新执行函数。即便在有多个响应数据时却不会发生重复渲染。

由此可以推断。useState useRef 等函数，返回的是一个独立于组件函数之外的引用对象。类似于闭包或继承。在组件函数编译时，reactRender 会依据函数内部的Hooks函数。自动生成与改函数组件对应的一系列的响应对象和监听函数。

• 即便有多个相同的Hooks，但每次组件重新渲染。都能渲染出正确的数据。

由此可以推断出：reactRender在编译的时候 会为函数组件中每个hooks做好编号。当下次再次执行就依照编号来对号入座。
又可以推断出：
①Hooks必须写在 render规定的组件定义中。（所有首字符或use后的首字符大写的函数名，都被视为对react组件函数的继承，都会被Reat解析）
②Hooks必须在组件明确定义。即不能有条件或非react函数的加持。以保证react在编译时能准确的识别并构建出对应的响应内存数据
③Hook也是属于组件的一种。只不过不是返回jsxDom而是引用数据。
综上推断：
①函数组件其实就是将class的写法还原为js最基本的函数写法。因为js中的class其实就是一个js中函数的语法糖。
② 每个自定义的函数组件都继承自react组件构造函数。
③ react的响应更新机制是，响应数据独立于自定义函数组件，但包含在react组件构造函数中。
④ 为了避免数据污染，自定义函数组件中不允许直接修改响应数据。只能依据react组件构造函数提供的修改方法修改。类似于class 中的set，get

• 依据上面所述，useState 与useRef 的区别

useState 每次返回一个新的对象引用。useRef每次返回同一个对象。所以可用useRef来定义/接受和修改闭包作用域的用对象。