TypeScript React有状态组件可见性修饰符最佳实践咨询

作为天天和 TypeScript + React 打交道的开发者，我经常在团队里碰到关于类组件修饰符的讨论——尤其是有状态组件里的 state 和方法该用什么修饰符才规范。今天就把我总结的最佳实践分享给你：

一、类属性形式的 state：优先用 private #

首先明确：React 类组件的 state 是组件内部的核心状态，绝对不应该被外部组件直接访问或修改——这会破坏组件的封装性，导致状态变化不可控，后期调试起来头大。

所以最推荐的做法是用 private 修饰符：

interface Props {}
interface State {
  count: number;
  isActive: boolean;
}

class Counter extends React.Component<Props, State> {
  // 👍 推荐：private 确保 state 仅能在组件内部访问/修改
  private state: State = {
    count: 0,
    isActive: false
  };

  // ❌ 不推荐：public 会让外部直接修改 this.state.count，完全破坏封装
  // public state: State = { ... };
}

如果你的团队用的是较新的 TypeScript 版本，也可以试试私有字段语法（#state），它提供了更严格的私有性（编译后也会限制访问），不过要考虑团队的习惯和兼容性：

class Counter extends React.Component<Props, State> {
  // 更严格的私有字段
  #state: State = { count: 0, isActive: false };
}

少数情况（比如你在写一个可继承的基类组件），可以用 protected 修饰，让子类能访问父类的 state，但这种场景其实不多见，谨慎使用。

二、组件方法的修饰符：按需选择 #

方法的修饰符选择核心看这个方法的访问范围：

1. 内部辅助方法：用 private #

那些只在组件内部调用的辅助逻辑（比如处理状态更新、格式化数据的函数），直接标记为 private，避免外部误调用：

private updateCount = (newCount: number) => {
  this.setState({ count: newCount });
};

private formatCount = (count: number): string => {
  return count > 10 ? "很多啦" : count.toString();
};

2. 生命周期/Render 方法：保持 public（或默认） #

React 框架本身需要调用这些方法（比如 componentDidMount、render），所以不能用 private——否则 React 无法访问它们。你可以显式标记 public，或者保持默认（TS 默认是 public）：

public componentDidMount() {
  this.fetchInitialData();
}

public render() {
  return <div>{this.formatCount(this.state.count)}</div>;
}

3. 供外部调用的方法：显式标记 public #

如果你的组件需要暴露一些方法给父组件通过 ref 调用（比如重置状态、触发刷新），一定要显式标记为 public，最好加上注释说明用途：

/**
 * 重置计数器到初始值
 */
public resetCounter() {
  this.setState({ count: 0 });
}

4. 事件处理方法：优先 private #

绑定到 JSX 元素的事件处理函数（比如 handleClick），因为只在组件内部使用，用 private 完全没问题。尤其是用箭头函数绑定 this 的场景，private 不会影响它在 JSX 中的使用：

private handleIncrementClick = () => {
  this.updateCount(this.state.count + 1);
};

render() {
  return <button onClick={this.handleIncrementClick}>+1</button>;
}

三、通用最佳实践总结 #

• 封装优先：能标记为 private 的就不要用 public，最小化组件的暴露范围，降低维护成本
• 遵循 React 规则：生命周期和 render 方法必须保持可被 React 访问，不能用 private
• 明确意图：显式标记修饰符，让其他开发者一眼就能看懂方法/属性的访问范围
• 谨慎使用 protected：只有在组件继承的场景下才考虑，避免过度设计

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