前端

这篇笔记记录了React与state相关的一些基础知识

一、本堂课重点内容

  • state相关知识点

二、详细知识点介绍

1、state定义

  • React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
  • React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。React中很多地方需要用到数据，这在React中被叫做状态，我们需要一个专门管理状态的方法，于是state相关的就诞生了。
  • state应该被要求有两个基本功能
    • 能够存储一定的值，从而能被react使用
    • 能够在它改变的时候被React监听到并且重新渲染。

2、state原理

  • state是React组件自身的数据，具有“响应式”的特性（当state变量被this.setState()修改时，视图会自动更新），render运行返回新的JSX，React背后会发生可中断的协调，和不可中断的提交的过程。
  • 这里“响应式”和Vue的“响应式”是完全不同的，React没有Vue中的指令，依赖收集、数据劫持等工作。

3、React中的事件绑定

  • 以onclick为例，原生中的以on开头的事件都要改成on+大写，例如onclick => onClick
  • 注意绑定函数时对应的应该是函数名，例如onClick={demo}，而不是函数的调用，如onClick={demo()}
  • e.g.
render() {
    return <h1 onClick={demo}>阿梓从小就很可爱</h1>
}
function demo() {
    console.log("牛蛙");
}

4、类方法中的this

  • 有下面一段代码
class Azi extends React.Component {
    constructor(props) {
        super(props);
        // 初始化状态
        this.state = {isZhubi: true};
    }
    render() {
        // 读取状态
        const {isZhubi} = this.state;
        return <h1 onClick={this.changeZhubi}>阿梓从小就很{isZhubi ? '铸币': '可爱'}</h1>
    }
    changeZhubi() {
        // changeZhubi放在哪里？ —— Azi的原型对象上，供实例使用
        // 由于changeZhubi是作为onClick的回调，所以不是通过实例调用，是直接调用
        // 类中的方法默认开启了局部的严格模式，所以changeZhubi中的this为undefined
        console.log(this);
    }
}
  • 注意，由于changeZhubi是相当于把整个函数直接赋值给了onClick，因此在render中并不是通过实例调用，而是直接调用。对于默认开启了严格模式的类中方法来说，直接调用的话，this为undefined
  • 解决方法：在constructor()中添加一段语句 
    this.changeZhubi = this.changeZhubi.bind(this);
    • 这里有必要补充一下bind()方法的定义：bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

5、setState的使用

  • 注意：state不能直接更改，必须通过setState进行更新，且更新是一种合并，不是替换
  • this.state = {isZhubi: true, jimei: '鲨鱼'}，如果执行setState({isZhubi: false})，jimei的值不会改变或丢失
  • 使用setState后，则构造器调用1次，render调用n次（n为点击次数）

6、state的简写

  • JS中类的小知识：类中可以直接写变量赋值语句
class Kero {
    constructor() {}
    // 注意这里不要写let
    name = "xiaoke"
}
  • 由此可以引申，state中的变量是给定的（不是在初始化时才赋值的），因此state可以直接写在类中；同样的，一般方法也可以写在类中，而使用箭头函数可以解决this的问题（箭头函数中的this指向外层的this）
  • state简化后的代码如下
class Azi extends React.Component {
    state = {isZhubi: true, jimei: "鲨鱼"};
    render() {
        const {isZhubi, jimei} = this.state;
        return <h1 onClick={this.changeZhubi}>阿梓从小就很{isZhubi ? '铸币': '可爱'}的好集美是{jimei}</h1>
    }
    changeZhubi = () => {
        const isZhubi = this.state.isZhubi;
        this.setState({isZhubi: !isZhubi});
    }
}

三、实践练习例子

  • 已在上一节中列出

四、课后个人总结

  • 从这一节可以看得出来学好React需要强大的JavaScript基础作为支撑。

五、引用参考