react语法(2)

获取真实的DOM节点

组件并不是真实的DOM,而是存在于内存之中的一种数据结构，是一种虚拟的DOM，只有当插入DOM的时候，才会变成真正的DOM,根据react设计的规则，所有DOM的变动，都先体现在虚拟DOM上，然后再将实际变化的部分，反映到真实的DOM上。可以极大的提高网页的性能。
有时，为了获取真实的DOM节点，这时就要用到ref属性。

class MyComponet extends React.Component{
    //构造方法
    constructor(props){
        super(props);
        this.myText = React.createRef();
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick(){
       this.refs.myText.focus();
    }
    render(){
        return(
            <div>
                <input type="text" ref="myText"/>
                <input type="button" value="关注" onClick={this.handleClick}/>
            </div>
        )
    }
}
ReactDOM.render(
    <MyComponet/>,
    document.getElementById('example')
)

在以上的代码中，组件myComponet的子组件中有一个文本输入框，用户获取用户的输入，这时就必须获取真实的DOM节点，虚拟的DOM节点是拿不到用户的输入的。所以，文本输入框有一个ref属性，this.refs.[refName]便可以返回这个真实的DOM。
属性获取真实的DOM值，必须等到虚拟DOM插入后，才能使用这个属性，否则就会报错。通过为组件指定click事件的回调函数，确保了只有等到真实的DOM发生click事件之后，才会读取this.refs.[refName]属性。

this.state

组件要与用户发生互动，react的一大创新，就是将组件看成是一个状态机，一开始的话有一个初始状态，随后与用户进行互动，导致状态变化，从而触发重新渲染UI.

class LikeButton extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            like: false
        };
        this.handleClick = this.handleClick.bind(this);
    };
    handleClick(event){
        this.setState({like:!this.state.like});
    };
    render(){
        var text = this.state.like ? "ckq" : "cpp";
        return (
            <p onClick={this.handleClick}>
                {text}

            </p>
        )
    }
}
ReactDOM.render(
    <LikeButton/>,
    document.getElementById('example')
)

上面的组件LikeButton中，在构造方法中定义了初始的属性like并设置为false,随后为文本p绑定点击事件handleClick，在handleClick中修改state的值，随后text的值会随着like的变化而变化。最后再重新渲染到页面上。
this.props和this.state都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props表示一旦定义，就无法修改的值，而this.state会随着用户的互动而发生变化的属性。

获取表单的值

class Input extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value:"hello"
        };
        this.handleChange = this.handleChange.bind(this);
    };
    handleChange(event){
        this.setState({value:event.target.value});
    };
    render(){
        var value = this.state.value;
        return (
            <div>
                <input type="text"  onChange={this.handleChange}/>
                <input type="text" value={value}/>
            </div>
        )
    }
};

ReactDOM.render(
    <Input/>,
    document.getElementById('example')
)

在Input组件中，有两个子组件input,为第一个子组件绑定时间handleChange，可以获取它的值，随后将value设置为当前的值，并且可以在第二个input中动态发生绑定和变化。也就是说第二个input的值会随着第一个input的值的变化而变化。

组件的生命周期

组件的生命周期可以分为3个状态
Mounting:已插入真实DOM。
Updating:正在被重新渲染。
Unmounting:已移出真实DOM。
react为每个状态提供了2中处理函数.will在进入状态之前调用，did在进入状态之后调用。
共计5种处理函数。

此外,react还提供了2种特殊状态的处理函数。

class Hello extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            opacity:1.0
        }
    };
    componentWillMount(){
    console.log(111);
        }
    componentDidMount() {
       console.log(222);
    }

    render() {
        return (
            <div>hello</div>
        );
    }
}

ReactDOM.render(
    <Hello/>,
    document.getElementById('example')
)

在组件渲染出来的过程中，先打印出111，随后再打印出222.