React Hook性能优化之行内memo为了确保良好的性能，如果某些应用程序状态发生更改，您希望重新渲染尽可能少的组件

使用Memo的重要性

为了确保良好的性能，如果某些应用程序状态发生更改，您希望重新渲染尽可能少的组件。在React中，我们React.memo()通过比较当前组件的prop与先前渲染的prop来进行判断。
如果没有memoization，我们通常会为每个渲染一遍又一遍地创建相同的对象/回调，...以及相同的内容，但是由于它们每次都是新实例，因此它们将不会被识别为相同的值，并导致不必要的重新创建

对比传统的react优化

解决传统原生useMemo和useCallback 接口只能用于组件根的问题，内联的memo可以使用在任何地方，不用受到限制

安装包

npm install use-inline-memo

use-inline-memo: - github地址

用法

每当您要记忆一个值时，使用memo.X(),其中X是key,key一定要是唯一的

示例

function NameForm(props){
  //明确的Key使其能在IE中使用
  const memo = useInlineMemo("nameChange", "submitClick", "submitStyle")
  //如果你使用了es2015的垫片则不需要带参数
  //const memo = useInlineMemo()
  const [newName, setNewName] = React.useState(props.prevName)

  return (
    <React.Fragment>
      <TextField
        label="Name"
        onChange={memo.nameChange(event => setNewName(event.target.value), [])}
        value={newName}
      />
      <Button
        onClick={memo.submitClick(() => props.onSubmit(newName), [newName])}
        style={memo.submitStyle({ margin: "16px auto 0" }, [])}
      >
        Submit
      </Button>
    </React.Fragment>
  )
}

使用内联样式 props 通常是避免不必要的重新渲染，因为您将在每个渲染上创建一个新的样式对象，即使它的内容在很多情况下都不会改变。

不过，您无需memoize每个DOM元素的单样式对象。每当将对象传递到复杂的组件（重新渲染的开销很大）时，都应使用它。