了解一个新技术和技术点的时候需要了解的事情

西南_张家辉

发布于 2021-02-02 10:01:38

2790

发布于 2021-02-02 10:01:38

文章被收录于专栏：张家辉的树屋

怎么学习和了解一个技术点

最近学习 react 的一点感想

他源自哪里？

比如 ref 属性，我们应该明确他是来自 react 的一个属性

他是什么？

定义是什么？具体的属性是什么？
比如 react 的 ref 属性，当我们需要在典型数据流之外强制的修改一个子组件的时候。
要修改的子组件可以是 react 组件实例，也可以是 DOM 元素。对于这种情况下，react 提供了一个 ref 属性。

怎么用？

React提供可以附加到任何组件的特殊属性。 ref属性接受一个回调函数，回调函数将在组件被挂载或卸载后立即执行。

import React from 'react';
import ReactDOM from 'react-dom';

class CustomTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.focus = this.focus.bind(this);
    }

    focus() {
        // textInput是一个标准的DOM元素
        this.textInput.focus();
    }

    render() {
        return (
            
                 {
                    this.textInput = input;
                }}/>
                
            
        );
    }
}
ReactDOM.render(
    ,
    document.getElementById('root')
);
复制代码

什么时候用？(使用场景)

通过ref属性设置回调函数
当在自定义组件上使用ref属性时，ref回调接收组件的已装入的组件实例作为其参数。例如，如果我们想要包装上面的CustomTextInput来模拟它在装载(mounting)后立即被点击：

class AutoFocusTextInput extends React.Component {
    componentDidMount() {
        this.textInput.focus();
    }
    render() {
        return (
            <CustomTextInput ref={input => {this.textInput = input; }} />
        );
    }
}
复制代码

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法