React的function Component中定义其他辅助函数时候的注意点

最近遇到一个不小的坑，具体来说就是当在function component中定义非render函数的时候， 常常因为忽略了arrow function的性质而导致错误。

const MyComponent = (props) => {
  const myHandler =  () => {
    if(props.checked) {
      dispatch(checkAction);
    } else {
      dispatch(uncheckAction);
    }
  }
  return (
  <>
    <checkBox onClick={myHandler}>
    ....
  </>
 );
}

以上的例子中，实际运行时候发现，每次dispatch的都是相同的内容，如果前一次是check，那么总是check，刷新一下，如果前一次是uncheck，那么总是uncheck。这是为什么呢？

注意myhandler的本质是一个变量，整个变量代表一个函数。而整个函数使用了所谓的箭头函数，所以在定义整个变量的时候，其实里面的所有的东西就已经固定了，那就是整个MyComponent生成的时候，当时传递进来的props就成了myHandler里面固定的东西，
这个myHandler就算MyComponent重新render，也是不会改变的。

为啥不会改变？ 因为MyComponent还是那个MyComponent，再被赋予不同的值调用一次而已，而本身myHandler的引用也没有改变。

具体，这个文章里面说得很详细。参考