这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
这篇笔记记录了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基础作为支撑。
