react Refs简单总结

2 Refs 转发

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。最常见的案例如下所述。一般情况是用不到Refs这个东西，因为我们并不直接操作底层DOM元素，而是在render函数里去编写我们的页面结构，由React来组织DOM元素的更新

1 为什么用到refs

简单的来说就是处理DOM元素的focus，文本的选择或者媒体的播放等，以及处罚强制动画或者同第三方DOM库集成的时候。

2 HTML elements

    export default class StrContext  extends  React.Component{
    static contextType = Tree
    constructor(props) {
        super();
        this.state = {
            myRef: React.createRef()
        }
    }
    componentDidMount(){
       console.log(this.state.myRef.current)
    }
    render() {
        return (
            <div ref={this.state.myRef}>
                {this.context}
            </div>
        )
    }
}

3 Class Components

str.js

import React from 'react'
import StrContext from '../../components/StrContext/strContext'
export default class Str extends React.Component{
    constructor(props) {
        super();
        this.state = {
            ref : React.createRef()
        }
    }
    componentDidMount() {
        this.state.ref.current.getName()
    }
render() {
    return(
        <div>
            <button onClick={this.props.setState}>点击确认</button>
            <StrContext ref={this.state.ref}></StrContext>
        </div>
    )
}

}

strContext.js

import React from 'react'
import {Tree} from "../../context/context";
export default class StrContext  extends  React.Component{
    static contextType = Tree
    constructor(props) {
        super();
        this.state = {
        }
    }
    getName(){
        console.log("测试数据")
    }
    render() {
        return (
            <div>
                {this.context}
            </div>
        )
    }
}