React中的state – 源码巴士

定义

一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state。
首先，在组件初始化的时候，通过this.state给组件设定一个初始的state，在第一次render的时候就会用这个数据来渲染组件。

state的修改

state不同于props的一点是，state是可以被改变的。不过，不可以直接通过this.state=的方式来修改，而需要通过this.setState()方法来修改state。
当我们调用this.setState方法时，React会更新组件的数据状态state，并且重新调用render方法，也就是会对组件进行重新渲染。

state作用

state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改。

事件处理绑定的三种方式

官方推荐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
        class Hello extends React.Component {
            constructor() {
                super();
                // 在构造器中声明绑定
                this.state = {flag: true};
                this.isClick = this.bindClick.bind(this);
            }

            bindClick() {
                this.setState({flag: !this.state.flag});
            };

            render() {
                return (<button onClick={this.isClick}> {this.state.flag ? '打开' : '关闭'} </button>);
            }
        }

        ReactDOM.render(<Hello></Hello>, document.getElementById("my"));
    </script>
</head>
<body>
<div id="my"></div>
</body>
</html>

简单方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
      class Hello extends React.Component{
        constructor() {
          super();
          this.state = { flag: true };
        }

        handleClick() {
          this.setState({ flag: !this.state.flag });
        };

        render () {
          return (
            <button onClick={this.handleClick.bind(this)}>
              {this.state.flag ? '打开':'关闭'}
            </button>
          );
        }
      }
      ReactDOM.render(<Hello></Hello>, document.getElementById("my"));
  </script>
</head>
<body>
<div id="my"></div>
</body>
</html>

箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel">
      class Hello extends React.Component{
        constructor() {
          super();
          this.state = { flag: true };
        }

        handleClick() {
          this.setState({ flag: !this.state.flag });
        };

        render () {
          return (
            <button onClick={() => this.handleClick()}>
              {this.state.flag ? '打开':'关闭'}
            </button>
          );
        }
      }
      ReactDOM.render(<Hello></Hello>, document.getElementById("my"));
    </script>
</head>
<body>
<div id="my"></div>
</body>
</html>

原文链接：https://blog.csdn.net/LeonArdo_Netsr/article/details/119109966