React函数组件中如何编写方法？附性能与实践相关疑问

先把你提供的官网类组件示例转换成函数组件实现，直观对比：

import { useState } from 'react';

function TodoApp() {
  // 拆分状态，逻辑更清晰
  const [items, setItems] = useState([]);
  const [text, setText] = useState('');

  // 组件内部定义事件处理函数
  const handleChange = (e) => {
    setText(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!text.trim()) return;
    const newItem = { text, id: Date.now() };
    // 使用函数式更新，确保拿到最新状态
    setItems(prevItems => [...prevItems, newItem]);
    setText('');
  };

  return (
    <div>
      <h3>TODO</h3>
      <TodoList items={items} />
      <form onSubmit={handleSubmit}>
        <label htmlFor="new-todo">What needs to be done?</label>
        <input
          id="new-todo"
          onChange={handleChange}
          value={text}
        />
        <button>Add #{items.length + 1}</button>
      </form>
    </div>
  );
}

// 无状态组件简化为纯函数
function TodoList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

下面逐个解答你的疑问：

一、函数组件里怎么写“类组件式的方法”？ #

函数组件没有类的this和类方法概念，但可以直接在组件内部定义函数（比如上面的handleChange），这些函数能直接访问组件内的状态和props，逻辑上和类组件的方法等价。

二、内联函数会有性能问题吗？ #

你的理解没错——每次组件渲染时，内联函数都会生成新的引用，但绝大多数业务场景下这完全不是问题。React的Diff算法对这种情况做了优化，只有当你的组件是渲染极频繁的列表项、或者大型复杂组件时，才需要考虑优化。

真要优化的话，用useCallback缓存函数引用，避免重复创建：

import { useCallback } from 'react';

// 只有当依赖项setText变化时，才重新创建函数
const handleChange = useCallback((e) => {
  setText(e.target.value);
}, [setText]);

注意：别滥用useCallback，只有当函数作为props传给被memo包裹的子组件，或者作为其他钩子的依赖项时，才需要用它。

三、外部函数怎么更新组件状态？ #

如果函数定义在组件外部，它没法直接访问组件内的状态更新函数，这时候可以通过传参把状态更新函数或当前状态传进去：

// 外部函数
function handleChangeExternal(e, setText) {
  setText(e.target.value);
}

// 组件内部调用
<input
  id="new-todo"
  onChange={(e) => handleChangeExternal(e, setText)}
  value={text}
/>

但这种写法反而增加了复杂度，除非这个函数要被多个组件复用，否则完全没必要这么做。

四、函数组件会不会更繁琐？ #

刚好相反，多数场景下函数组件比类组件更简洁：

• 不用处理烦人的this绑定问题（类组件里经常要写bind或者箭头函数）
• 状态可以拆分成多个独立的useState，逻辑更清晰；复杂状态用useReducer管理
• 逻辑复用更灵活，自定义Hooks可以轻松抽离跨组件逻辑，比类组件的HOC、render props直观太多

五、Hooks推出后，函数组件能实现所有功能吗？值得选吗？ #

是的，Hooks完全覆盖了类组件的核心能力：

• 状态管理：useState、useReducer
• 生命周期：useEffect可以模拟componentDidMount、componentDidUpdate、componentWillUnmount等所有生命周期行为
• 上下文访问：useContext
• 缓存计算值：useMemo
• 缓存函数：useCallback
• 自定义Hooks可以实现任何复杂逻辑

现在React官方更推荐用函数组件，它是React的未来方向，代码更简洁、逻辑复用更高效，几乎所有新特性都会优先支持函数组件。

六、最佳实践总结 #

• 优先在组件内部定义事件处理函数，除非函数需要跨组件复用
• 不要过度优化内联函数，只有当函数作为props传给memoized子组件，或者作为钩子依赖时，才用useCallback
• 拆分状态：把相关状态用useState分开定义，复杂状态用useReducer
• 用自定义Hooks抽离复用逻辑，比如表单处理、数据请求等
• 保持组件纯净：不要直接修改状态，必须用状态更新函数；副作用代码放在useEffect里

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