P17:React高级-ref 的用法和 ref 中的坑

在编写组件中的方法时，经常会遇到语义化很模糊的代码，这对于团队开发是一个很大的问题。因为 review 代码或者合作时都会影响开发效率。或者核心成员离开，项目倒闭的严重影响。所以我们必须重视react代码当中的语义化。

ref 是个不错的工具，快来学习一下吧。

以前的案例中，我们写了下面的代码，使用了 e.target，这并不直观，也不好看。这种情况我们可以使用 ref 来进行解决。

inputChange(e){
    this.setState({
        inputValue:e.target.value
    })
}

如果要使用 ref 来进行，需要先在JSX中进行绑定， 绑定时最好使用ES6语法中的箭头函数，这样可以简洁明了的绑定DOM元素。

{this.input=input}}
    //关键代码------------end
    />

绑定后可以把上边的类改写成如下代码:

inputChange(){
    this.setState({
        inputValue:this.input.value
    })
}

这就使我们的代码变得语义化和优雅的多。

但是就我个人的经验来讲，我是不建议用 ref 这样操作的，因为React的是数据驱动的，所以用 ref 会出现各种问题。

import React,{Component,Fragment } from 'react'
import BeautyItem from './BeautyItem'

class Beauty extends Component{
//js的构造函数，由于其他任何函数执行
constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , // input中的值
        list:['基础按摩','精油推背']    //服务列表
    }
}

render(){
    return  (
        
            {/* 正确注释的写法 */}
            
                加入服务：
                {this.input=input}}
                //关键代码------------end
                />
                 增加服务 
            
            
                {
                    this.state.list.map((item,index)=>{
                        return (
                            
                        )
                    })
                }
            
        
    )
}

    // inputChange(e){
    //     // console.log(e.target.value);
    //     // this.state.inputValue=e.target.value;
    //     this.setState({
    //         inputValue:e.target.value
    //     })
    // }

    inputChange(){
        console.log(this.input.value);
        this.setState({
            inputValue:this.input.value
        })
    }
    
    //增加服务的按钮响应方法
    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })

    }
   //删除单项服务
   deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
}

}
export default Beauty

比如现在我们要用 ref 绑定取得要服务的数量，可以先用 ref 进行绑定。

{this.ul=ul}}>
    {
        this.state.list.map((item,index)=>{
            return (
                
            )
        })
    }

绑定后可以在 addList() 方法中，获取当前

ddList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:''
    })
    //关键代码--------------start
    console.log(this.ul.querySelectorAll('li').length)
    //关键代码--------------end
}

addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:''
        //关键代码--------------start
    },()=>{
        console.log(this.ul.querySelectorAll('li').length)
    })
    //关键代码--------------end
}