Question

组件是构成 Rax 中的一个视图单元。这些组件具有状态，此状态是组件的本地状态，当状态值因用户操作而更改时，组件知道何时重新渲染。现在，Rax 组件可以无限重新渲染下去。有些重新渲染可能是必要的，但大多数情况是非必需的，所以这些不必要的渲染将严重拖慢我们的应用程序，降低了性能。

因此我们引入 memo，对应的是函数组件， 如果你的函数组件在给定相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，Rax 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

示例

这里创建了一个示例，当我们利用 setState 再次 render 时，memo 组件不会再次 render，而正常的组件则会重复 render。

import { memo, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';

const useUpdate = () => {
  const [, setState] = useState(0);
  return () => setState(num => num + 1);
};

const HelloMemo = memo((props) => {
  console.log('memo-render');
  return <Text>{props.children}</Text>
});

const HelloNormal = (props) => {
  console.log('normal-render');
  return <Text>{props.children}</Text>
}

function App() {
  console.log('render')
  const update = useUpdate();
  const [state, setState] = useState(1);
  return <View>
    <HelloNormal>Rax</HelloNormal>
    <HelloMemo>Hello</HelloMemo>
    <View>{state}</View>
    <View onClick={() => setState(num => num + 1)}>Update</View>
  </View>
}