react ref 的使用

ref 的使用

import React, { Component, createRef } from 'react';
import BScroll from "better-scroll" // 引入滚动 移动端用的多
//使用先实例化 ()小括号里加入滚动的对象 new BScroll()

// ()小括号保证优先级 把点重复100次
let list = [...(".").repeat(100)] 
console.log(list)

class App extends Component {

  // 注意ref：在 组件挂载完成之后及更新之后使用
  componentDidMount(){
    // console.log(this.refs.box)  //ref绑定后 refs 有div 获取到dom节点
    // new BScroll(this.refs.box)  //老版本
    new BScroll(this.box.current)    //新版本 box不在refs中 直接在this中可以找到

  }
  box = createRef(); //新版创建一个box 多个ref要使用的话 在去创建

  render() {  

    return (
            <div
              style={{
                width:"200px",
                height:"300px",
                border:"1px solid",
                // 超出隐藏
                overflow:"hidden"
              }}
              ref = "box" //字符串形式，快要废弃尽量不使用
              ref = {this.box} //新版 创建box对象，多个要使用的话 在去创建
            >
              <ul
                style ={{
                  margin:0,
                  padding:0,
                  // 
                  listStyleL:"none"
                }}
              >

              {
                list.map((item,index)=>{
                  return <li key={index}>这是第{index}个数据</li>
                })
              }
              </ul>
            </div>
           );
  }
}
export default App;

ref和声明周期结合的时候 只要不做修改ref，就会存储初始的值(变化前的值)
ref不绑定标签 绑定数据绑定txt数据

import React,{useState,useEffect,useRef} from 'react';

function Child(props){ //props 接收父 参数
    // console.log(props)
    // let data = props.data 1不结构
    let {data} = props //2解构方法
    let [ages, setage] = useState(8)
    // ref 的使用
    let agep = useRef()

    let [txt, settxt] = useState("文字")

    //ref和声明周期结合的时候 只要不做修改ref，就会存储初始的值(变化前的值)
    let txtP = useRef(txt) // 不绑定标签 绑定数据绑定txt数据,

    // 这里获取的是dom节点 注意要在挂载之后获取
    // console.log(agep.current)
    useEffect(()=>{

        console.log(txtP.current,txt) //ref 要绑定数据 不要绑定标签
        //这里没有修改之前txtP.current永远获取到初始值，修改后获取到变化前的值
        txtP.current = txt  
        
    },[txt])
    let message= `你好啊啊啊啊`


  return <div>
            <h1>名称:{data.name}</h1>
            {/*      age不是传递过来的数据 是本地 */}
            <h3 ref= {agep}>age:{ages}</h3>

            <button onClick={()=>{
                setage(++ages)
            }}>
                涨一岁
            </button>

            <p>{txt}</p>
            <input
                type = "text"
                value= {txt}
                onChange={({target})=>{
                    settxt(target.value)
                }}        
            />
            <p
                dangerouslySetInnerHTML={{
                    __html:message
                }}
            ></p>

        </div>
}


export default Child;