专栏首页张培跃React之状态(State)

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也会发生相对应的变化! …… 今天先到这!哈,未完,待续!

本文分享自微信公众号 - 张培跃(zhangpeiyue8),作者:张培跃

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2019前端面试基础题集合!赶紧上车!快!快!快!

    在 ES5.1 里面函数是这样执行的(不讨论use strict和一些特殊情况,JS好复杂的),按如下顺序执行:

    用户1272076
  • 最易理解的VUE双向绑定原理不足70行代码搞定,逐行注释!

    用户1272076
  • es6中class类的全方面理解(二)------继承

    继承是面向对象中一个比较核心的概念。ES6 class的继承与java的继承大同小异,如果学过java的小伙伴应该很容易理解,都是通过extends关键字继承。...

    用户1272076
  • RocketMQ 生产者 Producer 启动过程

    从类关系中可以看出,MQProducer 有两种实现方式。一个是 DefaultMQProducer,另一个是 TransactionMQProducer。

    java404
  • 一杯茶的时间,上手 React 框架开发

    React(也被称为 React.js 或者 ReactJS)是一个用于构建用户界面的 JavaScript 库。起源于 Facebook 内部项目,最初用来架...

    一只图雀
  • (十八)c#Winform自定义控件-提示框

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏
  • Angular 2 + 折腾记 :(6) 动手实现只有年月的小组件

    这个组件实现并不是很复杂,我会尽量注释; 这货诞生的理由就是项目刚好有一个地方必须只能选择年月,而github上ng2+日期组件都涉及到年月日或时分秒; 效果用...

    CRPER
  • 从vue-router源码中看前端路由的两种实现

    随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高,单页应用(SPA)成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统,通过...

    前端迷
  • 使用dpkg安装teamviewer时依赖问题解决方法

    TLingC
  • 费斯托仿生学习网络项目为未来自动化提供灵感

    费斯托Festo在2014年汉诺威工业博览会上再次展示仿生学习网络项目的最新成果。在展会上,费斯托演示了怎样从大自然中汲取灵感,为未来的的自动化提供解决方案。这...

    机器人网

扫码关注云+社区

领取腾讯云代金券