onvno
commented
3 years ago Do React Hooks Replace Redux? 比较redux和hook使用场景
介绍中提到Render Props用法可以做了解
Open onvno opened 5 years ago
onvno
commented
3 years ago Do React Hooks Replace Redux? 比较redux和hook使用场景
介绍中提到Render Props用法可以做了解
onvno
commented
3 years ago didmount执行一次useEffect
useEffect(() => {
fetchData()
}, [])以下为16.9.x- 17.0.0文档
1.顶层API：https://zh-hans.reactjs.org/docs/react-api.htm 2.hook介绍：
文档简明清晰： React.memo 为高阶组件。
如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。
React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染。
默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。 ··· function MyComponent(props) { / 使用 props 渲染 / } function areEqual(prevProps, nextProps) { / 如果把 nextProps 传入 render 方法的返回结果与 将 prevProps 传入 render 方法的返回结果一致则返回 true， 否则返回 false / } export default React.memo(MyComponent, areEqual); ···
React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。 可以使用其简写语法 <></>
React.createRef React.createRef 创建一个能够通过 ref 属性附加到 React 元素的 ref。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
render() {
return <input type="text" ref={this.inputRef} />;
}
componentDidMount() {
this.inputRef.current.focus();
}
}React.forwardRef React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：
转发 refs 到 DOM 组件 在高阶组件中转发 refs
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;在上述的示例中，React 会将
因此，当 React 附加了 ref 属性之后，ref.current 将直接指向
const OtherComponent = React.lazy(() => import('./OtherComponent'));Suspense创建组件引用
import React, { Suspense } from 'react';const OtherComponent = React.lazy(() => import('./OtherComponent')); const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() { return (
); }
3.异常捕获：使用`Error Boundaries`包裹
### useMemo
返回一个 memoized 值。
把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。
记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。
如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。
你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证。将来，React 可能会选择“遗忘”以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目的。
### useRef
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
一个常见的用例便是命令式地访问子组件：function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// current 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
<button onClick={onButtonClick}>Focus the input</button>
</>); }
本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
你应该熟悉 ref 这一种访问 DOM 的主要方式。如果你将 ref 对象以 <div ref={myRef} /> 形式传入组件，则无论该节点如何改变，React 都会将 ref 对象的 .current 属性设置为相应的 DOM 节点。
然而，useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式。
这是因为它创建的是一个普通 Javascript 对象。而 useRef() 和自建一个 {current: ...} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象。
请记住，当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。
### useLayoutEffect
其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。
尽可能使用标准的 useEffect 以避免阻塞视觉更新。
Hook 简介：官方文档 StateHook,EffectHook重点介绍
使用react-hook 重写 react-redux 使用了useRudecer，useContext及自定义hook
扩展阅读：
Provider,connect两个方法React 新特性 Hooks 讲解及实例(三)：系列讲解