在编写组件中的方法时，经常会遇到语义化很模糊的代码，这对于团队开发是一个很大的问题。因为review代码或者合作时都会影响开发效率。或者到这核心成员离开，项目倒闭的严重影响。所以我们必须重视react代码当中的语义化。ref是个不错的工具 以前的案例中，我们写了下面的代码，使用了e.target，这并不直观，也不好看。这种情况我们可以使用ref来进行解决。

                <input
                    value={this.state.inputValue}
                    onChange={this.inptChange.bind(this)}
                    //关键代码--start
                    ref={(input)=>{this.input=input}}
                    //关键代码--end
                />

TIP:this.input这个input可以改成你想要的其他名字

setState是一个异步函数

setState的回调

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

完整代码

import React,{Component,Fragment} from "react";
import XiaojiejieItem from "./XiaojiejieItem";
class Xiaojiejie extends Component{
    constructor(props){
        super(props);
        this.state= {
            inputValue: 'yomigi',
            list: ['基础按摩','精油推背']
        }
    }
    render() {
        return(
            <Fragment>
                <input
                    value={this.state.inputValue}
                    onChange={this.inptChange.bind(this)}
                    ref={(input)=>{this.input=input}}
                />
                <button onClick={this.addList.bind(this)}>增加服务</button>
                <ul ref={(ul)=>{this.uls=ul}}>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                    <XiaojiejieItem
                                        key={index+item}
                                        content={item}
                                        index={index}
                                        deleteItem={this.deleteItem.bind(this)}
                                    />
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    inptChange(){
        this.setState({
            inputValue:this.input.value
        })
    }
    //增加列表
    addList(){
        if (this.state.inputValue.length>0){
            this.setState({
                list:[...this.state.list,this.state.inputValue],
                inputValue:''
            },()=>{
                console.log(this.uls.querySelectorAll('li').length)
            })
        }
    }
    deleteItem(index){
        let list =this.state.list;
        list.splice(index,1);
        this.setState({
            list:list
        })
    }
}
export default Xiaojiejie;