React中无状态组件的ref使用

96
作者 赵团结
2016.12.28 12:09* 字数 464

在React 0.14版本后,新增了一种无状态组件(Stateless Component):

无状态组件是指由"无状态"函数创建的组件,因此它并没有生命周期、render、state或refs

这一特点将原本与业务代码耦合的组件抽离出来,抽象成公共或高阶组件,满足函数式思想。


但是实际开发中遇到了一个问题,幻想我们有这样一个组件,它是在手机上的幻灯片,可以通过手势左右滑动,同时还会有两个按钮,分别点击控制滑动。

组件本身提供了控制滑动的方法,理想情况是通过refs来调用:

const Swipe = (props) => {
    return (
        <div>
            <ReactSwipe ref="reactSwipe"/>
            <div onClick={this.refs.reactSwipe.prev.bind(this)}>Prev</div>
            <div onClick={this.refs.reactSwipe.next.bind(this)}>Next</div>
        </div>
    );
}

但是,无状态组件不能使用refs,这样使用,React会抛出一个错误:

Stateless function components cannot have refs.

经过搜索相同的问题,发现了这篇issue#4936

这样可以解决:

const Swipe = (props) => {
    let _ref;
    return (
        <div>
            <ReactSwipe ref={e => (_ref = e)}/>
            <div onClick={_ref.prev.bind(this)}>Prev</div>
            <div onClick={_ref.next.bind(this)}>Next</div>
        </div>
    );
}

经过测试确实可以,没报错,也能调通那么为什么ref="string"就不可以,但是ref={function}就可以了?


经过查证和思考,我发现:

refs是确定一个节点的引用(refs => reference),可以是一个字符串或回调函数

当为回调函数时会在组件被实例化后立即执行,回调参数返回该组件实例的引用,此时上面的例子把返回的组件引用赋值到变量,因此后面可以使用。

美滋滋的实现了,研究了一下下,还可以写篇文章。但是直到看到了这里,这句话深深击碎了我:

Note:
Although string refs are not deprecated, they are considered legacy, and will likely be deprecated at some point in the future. Callback refs are preferred.

……

日记本