React Native中如何在渲染前更新TextInput变更后的状态？

我完全懂你的痛点——明明只希望文本输入框在用户修改内容时才更新状态，结果现在整个组件一直在反复渲染，这确实挺闹心的。咱们一步步来搞定这个问题：

1. 排查是否是其他状态更新触发了全局重渲染 #

看你代码里的latitude、longitude、markers这些状态，如果它们在持续更新（比如定位服务一直在获取位置），会触发整个Whereto组件的重渲染，哪怕goingto文本框的值根本没变化。这种情况下，最有效的办法是把文本输入框抽成独立的子组件，让它只依赖goingto状态和对应的更新方法，这样父组件其他状态变化时，子组件不会跟着“凑热闹”。

举个类组件的实现例子：

// 抽离的文本输入子组件
class GoingToInput extends Component {
  // 手动控制组件更新时机：只有当goingto值变化时才渲染
  shouldComponentUpdate(nextProps) {
    return nextProps.goingto !== this.props.goingto;
  }

  render() {
    return (
      <TextInput
        value={this.props.goingto}
        onChangeText={(text) => this.props.onChangeText(text)}
        placeholder="Where to?"
      />
    );
  }
}

// 父组件Whereto中使用子组件
export default class Whereto extends Component {
  constructor(props) {
    super(props);
    this.state = {
      latitude: null,
      longitude: null,
      location: null,
      error: null,
      markers:[],
      goingto: ''
    };
  }

  // 单独定义更新goingto的方法，避免在render里生成新函数
  updateGoingTo = (text) => {
    this.setState({ goingto: text });
  }

  render() {
    return (
      <View>
        {/* 你的其他定位相关组件... */}
        <GoingToInput 
          goingto={this.state.goingto} 
          onChangeText={this.updateGoingTo} 
        />
      </View>
    );
  }
}

2. 函数组件场景用React.memo优化 #

如果你是用函数组件开发，直接用React.memo包裹文本输入组件，它会浅比较props，只有当goingto或更新函数变化时才重新渲染：

// 用React.memo包裹的子组件
const GoingToInput = React.memo(({ goingto, onChangeText }) => {
  return (
    <TextInput
      value={goingto}
      onChangeText={onChangeText}
      placeholder="Where to?"
    />
  );
});

// 父组件中配合useCallback稳定更新函数引用
const Whereto = () => {
  const [goingto, setGoingto] = useState('');
  // 用useCallback固定函数引用，避免每次渲染生成新函数触发子组件更新
  const updateGoingTo = useCallback((text) => {
    setGoingto(text);
  }, []);

  return (
    <View>
      {/* 其他组件... */}
      <GoingToInput goingto={goingto} onChangeText={updateGoingTo} />
    </View>
  );
}

3. 避免在render中创建临时函数/对象 #

如果之前你是在render方法里直接写onChangeText={(text) => this.setState({goingto: text})}，每次渲染都会生成一个新的匿名函数，导致子组件的props变化，进而触发不必要的重渲染。把更新方法定义成类的成员函数（类组件）或用useCallback包裹（函数组件），就能解决这个问题。

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