浅谈react hook （ ref）

import React ,{useRef,useState,PureComponent} from "react";

import ReactDOM from "react-dom";

import "./index.css";

// 使用 ref 子组件必须是类组件---------------- useRef

// useRef 在使用的时候，可以传入默认值来指定默认值，

// 需要使用的时候，访问 ref.current 即可访问到组件实例：

class Children extends PureComponent {

  render () {

    const { count } = this.props

    return (

      <div>{ count }</div>

    )

  }

}

function App () {

  const [ count, setCount ] = useState(0)

 

  // 1

  const childrenRef = useRef(null)

 

  return (

    <div>

      点击次数: { count }

      <Children ref={childrenRef}  count={count}></Children>

      <button onClick={()=>{

        console.log(childrenRef);

        console.log(childrenRef.current.props.count);

        setCount(count+1)

      }}>点我</button>

    </div>

    )

}

ReactDOM.render(<App />, document.getElementById("root"));