持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

区别

复杂组件就是有状态的，简单组件就是没有状态的，上篇最后有说组件对的state就是组件的状态。 这个状态就是组件实例上的状态 组件实例的三大属性状态就是这个state，props，refs,注意是实例

函数式组件没有这个三大属性的，最新版的React使用hooks会让函数式组件有这3大属性的

state是组件对象最重要的属性，值是对象
组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）

用state控制显示状态

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习React</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Translate extends React.Component {
            constructor(props) {
                super(props)  //三大属性之二，后期说明，
                this.state = { isYunNan: false }
                //解决this指向问题
                this.change = this.change.bind(this)  //bind 原生方法，返回一个函数 ，原型链查找
            }
            change() { //不是通过实例调用，是直接调用，类中的方法开启了局部严格模式，访问this会不存在
                this.state.isYunNan = !this.state.isYunNan  //状态不可以直接更改
                this.setState({ state: this.state.isYunNan }) //要借助内置API更改
                console.log(this.state.isYunNan)
            }
            render() {
                const { isYunNan } = this.state
                return <h2 onClick={this.change}>我{isYunNan ? '是' : '不是'}云南的</h2>
            }
        }
        ReactDOM.render(<Translate />, document.getElementById('test'))
    </script>
</body>

</html>

效果：

动画11.gif

总结 bind

this.change.bind这个this找到了下面的change()函数，bind(this)作用就是把原型里面的函数传递到了实例上。
bind()方法会创建一个新的函数，constructor构造函数初始化的时候会执行这个传递。

但是这样就会很繁琐，有很多函数，内置变量就会写在构造函数中，构造函数就会很长，下面会解决这个问题。

学到这里就感觉对原生js有很高的要求，之前都是看别人写的代码，没有了解到js里面面对对象的知识，感觉学到了很多。

React 学习笔记（6）复杂组件&state

区别

用state控制显示状态

总结 bind