首页 > 其他 > 详细

[React] Always useMemo your context value

时间:2019-05-08 00:50:16      阅读:206      评论:0      收藏:0      [点我收藏+]

Have a similar post about Reac.memo. This blog is the take away from this post.

 

To understand why to use ‘React.useMemo‘ or ‘React.memo‘ (basiclly lastest React version use ‘useMemo‘), is that if the function component or context create a new reference, you need to use memo. 

 

Context: 

Context provider always create a new object to the comsuers. So use memo everytime you can.

function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  const value = React.useMemo(() => {
    return {
      count,
      setCount,
    }
  }, [count])
  return <CountContext.Provider value={value} {...props} />
}

 

function component:

Check the props, only do the re-render when props changes.

const TodoItem = React.memo(({ todo, onChange, onDelete }) => {
  console.log("TodoItem5", { todo, onChange, onDelete });
  const theme = useContext(ThemeContext);
  return (
    <Item key={todo.id} theme={theme}>
      <Checkbox
        id={todo.id}
        label={todo.text}
        checked={todo.completed}
        onChange={onChange.bind(this, todo.id)}
      />
      <Button onClick={onDelete.bind(this, todo.id)} theme={theme}>
        x
      </Button>
    </Item>
  );
});

 

[React] Always useMemo your context value

原文:https://www.cnblogs.com/Answer1215/p/10829020.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!