处理子组件更新（受控与非受控组件）：父子数据同步疑问

这个问题刚好戳中了React单向数据流和受控组件的核心点，我来给你理清楚：

为什么直接用value={this.props.someVal}会锁死输入？ #

当你给输入框绑定value={this.props.someVal}时，这个输入框就变成了受控组件：它的值完全由外部props控制。如果子组件只绑定了value却没有对应的onChange处理逻辑，输入框自然没法自主更新——因为用户输入时，props不会自动变化，输入框的值会被props强制拉回原来的状态。

正确的实现方式：子组件触发父组件更新props #

你的猜想是对的！要兼顾“父组件通过AJAX更新输入框”和“子组件自主输入更新”这两个场景，标准做法是：

• 父组件维护状态（比如this.state.someVal），AJAX请求完成后更新这个状态；
• 父组件把状态值和一个回调函数一起传给子组件；
• 子组件的输入框用value={this.props.someVal}（保持受控），同时在onChange事件里调用父组件传的回调，把新输入的值传回去；
• 父组件通过回调更新自己的状态，进而更新子组件的props，触发子组件重渲染，输入框的值就同步更新了。

代码示例（类组件） #

Parent组件

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      someVal: ''
    };
  }

  componentDidMount() {
    // 模拟AJAX加载数据
    setTimeout(() => {
      this.setState({ someVal: 'AJAX加载的初始值' });
    }, 1000);
  }

  handleSomeValChange = (newVal) => {
    this.setState({ someVal: newVal });
  }

  render() {
    return (
      <Child 
        someVal={this.state.someVal} 
        onSomeValChange={this.handleSomeValChange} 
      />
    );
  }
}

Child组件

class Child extends React.Component {
  handleInputChange = (e) => {
    // 把输入值传给父组件的回调
    this.props.onSomeValChange(e.target.value);
  }

  render() {
    return (
      <input 
        type="text" 
        value={this.props.someVal} 
        onChange={this.handleInputChange} 
      />
    );
  }
}

关于“props自动更新state”的误解 #

你之前以为props会自动更新子组件的state，其实这不是React的默认行为。如果子组件自己维护state，你可以在componentDidUpdate生命周期里监听props变化，手动更新子组件的state：

componentDidUpdate(prevProps) {
  if (prevProps.someVal !== this.props.someVal) {
    this.setState({ someVal: this.props.someVal });
  }
}

但这种方式属于半受控组件，容易出现状态不同步的问题（比如父组件更新了props，但子组件的state没及时跟上），所以除非有特殊场景，更推荐前面的受控组件方案——让父组件统一管理状态，子组件只负责展示和触发更新。

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