React ref属性

1.函数属性传值

上篇文章还有一点东西，在这里说一下：

属性传值还可以传递组件过去。

插槽里面还可以传递一个回调函数，到子组件接受这个函数执行即可！

 <div class="box1"></div>



    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script src="../../js/prop-types.js"></script>
    <script type="text/babel">
        function Demo() {
            return (
                <div>
                    <h1>我是父组件</h1>
                    <Child ss={<Add />}></Child>
                </div>
            )
        }

        function Child(props) {
            return (
                <div>{props.ss}</div>
            )
        }

        function Add() {
            return <div>东星耀阳的ADD</div>
        }



        ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
    </script>

2.ref属性之字符串写法

由于React不是双向数据绑定，所以我们要获取到组件的实例来进行组件的数据实时操作。

ref的字符串模式：

由react调用并返回DOM节点或class实例对象，将ref的返回值挂载到refs的实例对象上。

缺点：浪费性能，后期版本可能会被删除掉！

  <div id="root"></div>
    <!--  
           插槽:  
                组件标签属性传值 插槽
    
                
        -->
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script src="../../js/prop-types.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            getAttribute = () => {
                console.log(this.refs);
            }
            render() {
                return (
                    <div>
                        <h1 ref="refH">我是demo组件</h1>
                        <Child ref="refChild"></Child>
                        <button onClick={this.getAttribute}></button>
                    </div>
                )
            }
        }



        // 子组件 
        class Child extends React.Component {
            render() {
                return <h2>东星耀阳00000</h2>
            }
        }
        // 由react渲染页面 
        ReactDOM.render(<Demo></Demo>, document.getElementById("root"));
    </script>

3.ref回调函数

ref里面使用回调函数，第一个参数就是DOM节点或者是实例对象。

  <div id="root"></div>
    <!--  
           插槽:  
                组件标签属性传值 插槽
    
                
        -->
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <script src="../../js/prop-types.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            getAttribute = () => {
                console.log(this);
            }
            render() {
                return (
                    <div>
                        <h1 ref={(a) => { this.refH = a }}>我是demo组件</h1>
                        <Child ref={(a) => { this.refChild = a }}></Child>
                        <button onClick={this.getAttribute}></button>
                    </div>
                )
            }
        }



        // 子组件 
        class Child extends React.Component {
            render() {
                return <h2>东星耀阳00000</h2>
            }
        }
        // 由react渲染页面 
        ReactDOM.render(<Demo></Demo>, document.getElementById("root"));
    </script>

它会将对象挂载到this的属性上面！

如果是内联函数，当state中的数值发生改变的时候，这个内联函数会执行两次，第一次传入的是null值，第二次传入的是这个实例对象的值!

 class Demo extends React.Component {
            state = {
                msg: '12323'
            }
            getAttribute = () => {
                // console.log(this.);
                this.setState({
                    msg: this.state.msg + '1'
                })
            }
            render() {
                const { msg } = this.state
                return (
                    <div>
                        <h1 ref={(a) => { console.log(a); this.refH = a }}>{msg}</h1>
                        <Child ref={(a) => { this.refChild = a }}></Child>
                        <button onClick={this.getAttribute}>CLICK ME</button>
                    </div>
                )
            }
        }



        // 子组件 
        class Child extends React.Component {
            render() {
                return <h2>东星耀阳00000</h2>
            }
        }
        // 由react渲染页面 
        ReactDOM.render(<Demo></Demo>, document.getElementById("root"));

这个例子它的执行结果(当state中的值发生改变的时候)是

null和一个实例对象

解决办法：将这个内联函数，当做一个方法放在外面即可！

4.ref之创造容器

创造一个存储DOM节点或者Class类的实例的容器！

定义 React.createRef() 类的属性中设置

  <div id="root"></div>
    <!-- 
        ref  class用于DOM节点和类组件实例对象
            1. react 不是双向绑定数据
            2. 获取input的数据等其他元素的数据,通过ref来获取
        
        ref使用创建容器 
            1. 调用之后返回一个,用于存储DOM节点或者类组件实例的容器
            2. 定义 React.createRef()  类的属性中设置
            
    -->
    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js//babel.min.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            state = {
                num: 1
            }
            handleClick = () => {
                console.log(this);
                console.log(this.MyRefH);
                console.log(this.MyChildRef);
            }
            MyRefH = React.createRef()
            MyChildRef = React.createRef()

            render() {

                return (
                    <div className="dage">
                        <h1 ref={this.MyRefH}>父组件</h1>
                        <button onClick={this.handleClick}>点击获取节点</button>
                        <hr />
                        <Child ref={this.MyChildRef}></Child>
                    </div>
                )
            }
        }


        // 子组件 
        class Child extends React.Component {
            render() {
                return (
                    <div>
                        <h2>子组件Child</h2>
                    </div>
                )
            }
        }
        // 由react渲染页面 
        ReactDOM.render(<Demo></Demo>, document.getElementById("root"));
    </script>

5.利用事件函数来代替ref

在React中，并不是所有标签都需要用ref来获取节点的。有时候可以利用js底层提供的事件对象来提供event.target

6.函数组件中使用ref

使用useRef来接收ref，

如果要获取到子组件，可以用到forwardRef渲染

 <div id="root"></div>



    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js//babel.min.js"></script>



    <script type="text/babel">
        const { useRef } = React

        function Demo() {
            let ss = useRef(null)
            let ss1 = useRef(null)
            function handle() {
                console.dir(ss, ss1);
            }
            return (
                <div>
                    <h1 ref={ss}>我是demo组件</h1>
                    <Child ref={ss1}></Child>
                    <button onClick={handle}></button>
                </div>
            )
        }
        const Child = React.forwardRef((props, ref) => {
            return (
                <div ref={ref}>
                    {1232}

                </div>
            )
        })



        ReactDOM.render(<Demo></Demo>, document.querySelector('#root'))