将React Props作为函数参数传递是否为最佳实践？有无更优方案

当前实现的不足 #

你的代码能实现需求，但存在几个不符合最佳实践的问题：

• 不必要的子组件重渲染：每次WeatherInfo组件渲染时，getWeatherHere函数都会被重新创建。把这个函数作为props传给OtherComponent后，哪怕isCelsius没变化，只要父组件因weatherInfo更新等原因重渲染，子组件就会因为接收的getWeatherHere引用变化触发无意义的重渲染，浪费性能。
• 参数传递冗余：OtherComponent已经通过props拿到了isCelsius状态，而getWeatherHere又要求传入该参数——其实函数可以直接捕获组件内部的isCelsius状态，没必要多此一举传参，徒增逻辑冗余。
• 异步操作无清理：navigator.geolocation.getCurrentPosition的回调是异步的，如果组件在请求完成前卸载，后续的setWeatherInfo会尝试更新已卸载组件的状态，触发React警告。

优化方案 #

针对以上问题，推荐用useCallback缓存函数引用，调整逻辑简化参数，并添加异步操作的安全处理：

export default function WeatherInfo() {
  const [weatherInfo, setWeatherInfo]: [IWeather, React.Dispatch<IWeather>] = useState();
  const [isCelsius, setIsCelsius] = useState(true);
  // 用ref标记组件是否挂载，避免卸载后更新状态
  const isMountedRef = useRef(true);

  // 组件卸载时标记为未挂载
  useEffect(() => {
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  // 用useCallback缓存函数，仅当依赖项变化时重新创建
  const getWeatherHere = useCallback(() => {
    navigator.geolocation.getCurrentPosition(async ({ coords: { latitude, longitude } }) => {
      const unit = !isCelsius ? 'imperial' : undefined;
      const data = await Weather.getWeather(latitude, longitude, unit);
      // 仅当组件仍挂载时更新状态
      if (isMountedRef.current) {
        setWeatherInfo(data);
      }
    });
  }, [isCelsius, setWeatherInfo]);

  // 组件挂载及isCelsius变化时调用函数
  useEffect(() => {
    getWeatherHere();
  }, [getWeatherHere]);

  return (
    <OtherComponent isCelsius={isCelsius} getWeatherHere={getWeatherHere} />
  );
}

优化点说明 #

1. 函数缓存：useCallback会固定getWeatherHere的引用，只有当isCelsius或setWeatherInfo变化时才会重新生成函数，避免子组件因函数引用变化频繁重渲染。
2. 逻辑简化：函数不再需要接收isCelsius参数，直接使用组件内部状态，减少参数传递冗余，逻辑更清晰。
3. 异步安全：通过useRef标记组件挂载状态，确保只有组件处于挂载状态时才更新weatherInfo，避免React警告。

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