React Native TextInput Ref Callback触发异常：输入时频繁调用

在React Native中使用TextInput的Ref Callback时出现异常：每次在TextInput中输入内容，refCallback都会被调用。而Web端使用input组件时符合React官方预期——仅在DOM节点挂载时传入节点、移除时传入null，总共触发两次。但React Native的TextInput未按此逻辑工作，寻求解决办法。

代码示例：

class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {}
    }
    _change = (e) => {
        this.setState({ value: e.target.value });
    }
    refCallback = (el) => {
        console.log("change")
    }

    _style = { backgroundColor: 'red', marginTop: 30 }

    render() {
        return <TextInput
            style={this._style}
            ref={this.refCallback}
            type="text"
            value={this.state.value}
            onChange={this._change}
        />
    }
}

原因分析 #

React Native的TextInput在状态更新（比如输入内容触发setState）时，底层原生视图实例可能会被重新创建，导致ref回调被重复调用。这是RN原生组件与Web DOM组件的实现差异，并非Bug，属于平台特性。

具体解决方法 #

方法1：缓存ref实例，过滤重复调用 #

在ref回调中判断传入的实例是否与缓存值一致，仅在实例真正变化时执行逻辑：

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
        this.inputRef = null // 缓存ref实例
    }
    _change = (e) => {
        this.setState({ value: e.nativeEvent.text }); // RN中需用nativeEvent.text获取输入值
    }
    refCallback = (el) => {
        if (el !== this.inputRef) {
            this.inputRef = el
            console.log("ref 实例更新") // 仅在挂载/卸载时触发
        }
    }

    _style = { backgroundColor: 'red', marginTop: 30, height: 40, paddingHorizontal: 10 }

    render() {
        return <TextInput
            style={this._style}
            ref={this.refCallback}
            value={this.state.value}
            onChange={this._change}
        />
    }
}

注意：React Native的TextInput onChange事件中，输入值需通过e.nativeEvent.text获取，原代码的e.target.value是Web端写法，在RN中无法生效。

方法2：改用createRef/useRef替代回调式ref #

使用React提供的createRef（类组件）或useRef（函数组件）保存ref，这种方式不会在每次渲染时触发回调，仅在组件挂载时赋值：

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
        this.inputRef = React.createRef() // 使用createRef
    }
    _change = (e) => {
        this.setState({ value: e.nativeEvent.text });
    }

    // 可在生命周期中获取已挂载的ref
    componentDidMount() {
        console.log("input ref已挂载", this.inputRef.current)
    }

    _style = { backgroundColor: 'red', marginTop: 30, height: 40, paddingHorizontal: 10 }

    render() {
        return <TextInput
            style={this._style}
            ref={this.inputRef}
            value={this.state.value}
            onChange={this._change}
        />
    }
}

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