第六节 React 中的 state

前端时间看到掘金里面诟病state 的设计，作为一个初学者似懂非懂。在后面的写法中我严格遵守一些规则来使用state，避免state的一些缺陷。

React 中提供了state 属性让我们获取里面的数据，同时改变里面的数据用setState（）这个方法对数据进行修改

class MyApp extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            userList: ['张三','李四','王五']
        }
    }
    render(){
        return (
            <div>
                <List userList={ this.state.userList }/>
            </div>
        )
    }
}
class List extends React.Component{
    render(){
        console.log(this);
        return(
            <div>
                <ul>
                    {
                        this.props.userList.map( (item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
ReactDOM.render(<MyApp />,document.getElementById('app'));

我通过了state存放数据并给了子组件。

我现在来做一个添加修改state 里面的数据。创建一个按钮绑定一个事件。

class MyApp extends React.Component{
    constructor(props){
        super(props);
        this.addRandom = this.addRandom.bind(this); //注意
        this.state = {
            userList: ['张三','李四','王五']
        }
    }
    addRandom(){
        let name = '哈皮' + Math.floor(Math.random()*100);
        this.setState( (pre) => {   //注意
            return{
                userList: pre.userList.concat([name])
            }
        })
    }
    render(){
        return (
            <div>
                <List userList={ this.state.userList }/>
                <button onClick={ this.addRandom }>addRandom</button>
            </div>
        )
    }
}
class List extends React.Component{
    render(){
        console.log(this);
        return(
            <div>
                <ul>
                    {
                        this.props.userList.map( (item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
ReactDOM.render(<MyApp />,document.getElementById('app'));

上面的代码有两个分别表示了两个注意 ==>

第一个注意是将组件的this 绑定进去

如果不绑定进去，我们在点击的时候，是被window 调用，那么this 指向的是window，我们使用的babel转的是严格模式，那么this 指向的是一个空对象。

第二个注意是我们说了sate 被诟病的问题，state 是异步的一个操作。可以分别写入两个console进行测试，官方文档中要求禁止直接改变state原来的值，所以我们选择了数组合拼的方法进行处理。