在React组件函数内定义reducer是否合法安全？如何在reducer访问props？

合法性结论 #

在组件渲染函数内部定义reducer是合法但非最优的操作，不会触发运行时报错，但存在两个核心问题：

1. 每次组件渲染都会重复创建reducer函数实例，产生无意义的额外开销（虽然开销极小，普通场景下感知不到）
2. 存在闭包陷阱：useReducer 初始化时只会读取一次传入的reducer函数，后续组件重渲染传入的新reducer会被直接忽略。如果你的reducer依赖组件props，初始化后props更新时，reducer内部拿到的永远是第一次渲染时的旧props，会导致逻辑错误。

访问props的正确实现方案 #

按推荐优先级排序：

方案1（最推荐）：把依赖的props通过action参数传递 #

将reducer定义在组件外部，需要用到props时，在dispatch动作时把对应props作为action的属性传入即可，完全避免闭包问题，也符合redux生态的通用设计规范。
示例代码：

// 定义在组件外部，无闭包问题
const reducer = (state, action) => {
  switch(action.type) {
    case 'UPDATE_DATA':
      // 从action中取需要的props
      return {...state, data: action.payload + action.prefix}
    default:
      return state
  }
}

const Component = (props) => {
  const [state, dispatch] = React.useReducer(reducer, initState);

  const handleClick = () => {
    // dispatch时传入需要的props
    dispatch({
      type: 'UPDATE_DATA',
      payload: 'test',
      prefix: props.prefix // 这里传入props
    })
  }

  return <div onClick={handleClick} />
}

方案2：用ref存储最新props #

如果reducer依赖的props非常多，每次dispatch都传太繁琐，可以用ref同步最新的props，reducer直接从ref中读取即可，永远拿到的是最新值：

const Component = (props) => {
  // 用ref同步最新props
  const propsRef = React.useRef(props);
  React.useEffect(() => {
    propsRef.current = props;
  }, [props])

  const reducer = (state, action) => {
    // 从ref取最新props，不会有闭包问题
    const currentProps = propsRef.current;
    // 执行逻辑
  }

  const [state, dispatch] = React.useReducer(reducer, initState);

  return <div />
}

方案3（仅适合静态props场景）：直接在组件内定义 #

如果你的组件props永远不会更新，直接在组件内定义reducer也可以正常运行，不需要额外处理，只是有一点点冗余的函数创建开销，不影响功能。

内容的提问来源于stack exchange，提问作者mockingjay