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

前言

前面一篇文章在操作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 {
            state = { isYunNan: false }  //初始化状态
            render() {
                const { isYunNan } = this.state
                return <h2 onClick={this.change}>我{isYunNan ? '是' : '不是'}云南的</h2>
            }
            change = () => { //箭头函数
                this.state.isYunNan = !this.state.isYunNan  //状态不可以直接更改
                this.setState({ state: this.state.isYunNan }) //要借助内置API更改
                console.log(this.state.isYunNan)
            }

        }
        ReactDOM.render(<Translate />, document.getElementById('test'))
    </script>
</body>

</html>

动画11.gif

change = () => {}

这块代码使用了赋值语句+ 箭头函数，属于类里面的自定义方法。

箭头函数

是匿名函数的另一种表达形式，简化写法，之前一直习惯写普通函数的，现在要用react要开始习惯写箭头函数了。

// 普通函数 const fun = function() {}

// 箭头函数 const fun = () => {}

箭头没有prototype，箭头函数没有自己的this，它的函数体中使用的this，其实是继承自定义它时所在的普通函数的this（如果定义在全局就指向全局对象window/undefined）。this是在上下文创建时确定的，因此箭头函数的父级（函数或全局对象）创建上下文时，箭头函数体内的this也可以说是“绑定”了。

在此时箭头函数this指向的是父级的Translate的实例对象，就是这个类组件的实例对象

以后在用类创建自定义方法的时候都要写成赋值语句的形式+箭头函数

原型上不允许直接使用箭头函数

实例属性

state = { isYunNan: false } //初始化状态

这块代码定义了类里的state应该叫实例属性，给 Translate的实例对象添加了一个属性，名为state,值为： { isYunNan: false }

state 总结

state 是组件对象最重要的属性，值是对象（key，value的组合）
组件自定义的方法中this为underfined，解决方法： a.强制绑定this,通过函数对象的bind()
b.箭头函数
状态数据不能直接修改或更新

React 学习笔记（7）state简写（箭头函数）

前言

箭头函数

实例属性

state 总结