React无状态组件中的事件处理程序

这样的事情怎么样：

let __memo = null;
const myHandler = props => {
  if (!__memo) __memo = e => props.dispatch(something());
  return __memo;
}

const myComponent = props => {
  return (
    <button onClick={myHandler(props)}>Click Me</button>
  );
}

但是，如果您不需要像示例中那样将onClick传递给较低/内部的组件，这确实是多余的。

就像无状态组件一样，只需添加一个函数-

function addName(){
   console.log("name is added")
}

它在返回中被称为 onChange={addName}

如果您担心道具中只有几个功能，可以这样做：

let _dispatch = () => {};

const myHandler = (e) => _dispatch(something());

const myComponent = (props) => {
    if (!_dispatch)
        _dispatch = props.dispatch;

    return (
        <button onClick={myHandler}>Click Me</button>
    );
}

如果变得更加复杂，我通常只需要返回一个类组件。

如果处理程序依赖于更改的属性，则由于缺少在其上进行缓存的有状态实例，因此每次都必须创建处理程序。另一个可行的替代方法是根据输入的道具来记住处理程序。

几个实现选项 lodash._memoize R.memoize 快速存储

这样吧：

const myHandler = (e,props) => props.dispatch(something());

const myComponent = (props) => {
 return (
    <button onClick={(e) => myHandler(e,props)}>Click Me</button>
  );
}

使用新的React钩子功能，它看起来可能像这样：

const HelloWorld = ({ dispatch }) => {
  const handleClick = useCallback(() => {
    dispatch(something())
  })
  return <button onClick={handleClick} />
}

useCallback creates a memoised function, meaning a new function will not be regenerated on each render cycle.

https://reactjs.org/docs/hooks-reference.html#usecallback

However, this is still at proposal stage.

将处理程序应用于功能组件中的元素通常应如下所示：

const f = props => <button onClick={props.onClick}></button>

如果您需要做更复杂的事情，则表明a）组件不应是无状态的（使用类或钩子），或者b）您应在外部有状态容器组件中创建处理程序。

顺便说一句，并且稍微破坏了我的第一点，除非组件位于应用程序中特别密集的重新渲染部分，否则无需担心在中创建箭头功能render()。