React之状态（State)

56 阅读 0 评论 37 点赞

我是靠谱客的博主烂漫白开水，最近开发中收集的这篇文章主要介绍React之状态（State)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在React当中，当你更新组件的state，然后新的state就会重新渲染到页面中。在这个时候不需要你操作任何DOM。你也可以认为组件在React当中是一个状态机（State Machines）。当用户进行操作时会实现不同的状态，然后再渲染到你的页面中，让你的页面与数据始终保持一致。

如果对状态不好理解的朋友，你可以认为状态即是数据！

现在我们先来通过ES6类React.Component完成一个通过点击按钮对DIV进行显示与隐藏的操作，效果如下：

咱们先将页面进行初始化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #myDiv{
            width:200px;
            height:400px;
            background:red;
            color:yellow;
            border:1px solid green;
        }
    </style>
    <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
    <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
    <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
    <div id="wrap"></div>
</body>
<script type="text/babel">
    class MyComponent extends React.Component{
        constructor(props){
            super(props);
            // 为当前状态添加isShow属性
            this.state={
                // 值为true显示，false为隐藏。默认值为true。
                isShow:true
            }
        }
        render(){
            //返回组件的初始内容
            return <div>
                <input type="button" value="显示与隐藏"/>
                <div id="myDiv">我在这里呀！</div>
            </div>
        }
    }
    ReactDOM.render(
        <MyComponent/>,
        document.querySelector("#wrap")
    )
</script>
</html>

到目前为止，页面已经初始化完毕了。在上面的代码中为state添加了一个默认值为true的属性isShow。isShow用来控制div的显示与隐藏！当isShow为true时显示，为false时隐藏
接下来要完成的二件事。

第一件事是要为按钮增加一个点击事件，事件与changeState方法进行绑定。当点击按钮时改变isShow的状态，也就是要为 isShow进行取反操作。
注意：
1、onClick中的c要大写。
2、onClick后跟的方法不要用引号包裹，而是用{}
3、在ES6的class中React是不会自动绑定this的，所以需要自己通过bind绑定。
4、changeState方法中，不能直接修改isShow的值，而是需要借助setState方法来进行设置。
第二件事是要为id为myDiv的DIV增加一个style属性，该属性要根据isShow的状态来对DIV进行显示与隐藏
注意：
1、style的值不要用双引号，而是用{}，否则会报错
最终版代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #myDiv{
            width:200px;
            height:400px;
            background:red;
            color:yellow;
            border:1px solid green;
        }
    </style>
    <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
    <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
    <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
    class MyComponent extends React.Component{
        constructor(props){
            super(props);
            // 为当前状态添加isShow属性
            this.state={
                // 值为true显示，false为隐藏。默认值为true。
                isShow:true
            }
        }
        changeState(){
            //此处不能直接修改isShow的值。而是需要借助setState方法！
            this.setState({
                //取反操作
                isShow:!this.state.isShow
            });
        }
        render(){
            //返回组件的初始内容
            return <div>
                {/*在ES6的class中React是不会自动绑定this的，所以需要自己绑定*/}
                <input type="button" value="显示与隐藏" onClick={this.changeState.bind(this)} />
                <div id="myDiv" style={{display:this.state.isShow?'block':'none'}}>
                    我在这里呀！
                </div>
            </div>
        }
    }
    ReactDOM.render(
        <MyComponent/>,
        document.querySelector("#wrap")
    )
</script>
</html>

由上面的示例可以发现，当你改变isShow的状态时，div也会发生相对应的变化！
……
今天先到这！哈，未完，待续！
—————END—————
喜欢本文的朋友们，欢迎关注公众号 张培跃，收看更多精彩内容！！！