note

day05/note/lesson013_init_state.md

@@ -23,3 +23,148 @@
 
 那么这个需求应该怎么写呢？
 
+我们刚开始不要想那么多，先一步步来，先让页面上能够显示一句话：
+
+1.创建组件，既然我要用组件示例的三大属性之一，那么我不用说肯定得用类组件
+
+```jsx
+class Weather extends React.Component {
+  render() {
+    return (
+      <h2>今天天气很炎热</h2>
+    );
+  }
+};
+
+ReactDOM.render(<Weather />, document.getElementById("test"));
+```
+
+我直接这样是不是就可以直接在页面上展示一句话叫`今天天气很炎热`。
+
+但是我们的需求是要求`炎热`这个次发生变化，而这两个字也只有两种变法：`凉爽`和`炎热`。那么对于这种情况我们是不是可以定义一个标识用`bool`类型来做？因为我这个词只有两种状态，不是`炎热`就是`凉爽`，那么我们可以定义一个标识叫`isHot`如果`isHot: true`那我们就展示`炎热`，如果`isHot: false`那么我们就展示`凉爽`。
+
+但是我们应该怎么处理呢？现在我们有设计思路了，也知道该用`state`但是怎么用？
+
+```jsx
+class Weather extends React.Component {
+  render() {      
+    console.log(this);
+    return (
+      <h2>今天天气很炎热</h2>
+    );
+  }
+};
+```
+
+我们先来看一下这个组件的实例对象
+
+![image-20211214162133040](https://file.lynchow.com/jinxuan/082135.png)
+
+我们看见这个实例对象里面有我们的`state`，但是`state`里面却并没有我们想要的`isHot`这个属性。那我们就应该想办法怎么样把`isHot`这个属性传入到`state`里面去呢。
+
+上节课中我们也介绍了，`state`属性在组件实例对象上，那么我们想要把`isHot`传到`state`里面，那就是说要变更实例对象的属性，那么就得借助构造器方法了。所以说，我们需要在我们的组件类里面写构造器方法。
+
+```jsx
+class Weather extends React.Component {
+  constructor(???) {
+
+  }
+
+  render() {
+    console.log(this);
+    return (
+      <h2>今天天气很炎热</h2>
+    );
+  }
+}
+```
+
+那么问题来了，这个构造器能接收到什么呢？在我们之前学习`class`相关的知识的时候是不是都有了解过，构造器方法能接到什么，取决于实例化对象时候传了些什么。
+
+但是组件类实例化的时候我们并没有自己来实例化啊。或许有人要说那我这个构造器方法该怎么写嘛，我都不知道实例化的时候回传入什么东西。
+
+没有关系，我也不知道怎么写。但是没有关系。我们来看一下官方文档中给的示例：
+
+![image-20211214170449418](https://file.lynchow.com/jinxuan/090452.png)
+
+官方给的示例中写了构造器方法，而且接受到了`props`，而且调用`super`方法的时候还讲`props`传了进去，这个词大家可能也挺熟悉的，组件三大核心熟悉之一嘛，但是这里就只是个参数。
+
+既然看了官方文档给的示例这么写，那么我们就学着来。
+
+```jsx
+class Weather extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = true;
+  }
+
+  render() {
+    console.log(this);
+    return (
+      <h2>今天天气很炎热</h2>
+    );
+  }
+}
+```
+
+这样我们设置了`state`那么这么写对吗？其实在语法上是没有问题的，是对的。但是不满足我们的需求，因为这样写不合理。如果我需要的`state`里面要有两个不同类型的标识的话怎么办呢？所以说我们不能这么写。
+
+其实`react`官方要求我们要把`state`写成一个对象。所以说这一段代码应该这么来写
+
+```jsx
+class Weather extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { isHot: true };
+  }
+
+  render() {
+    console.log(this);
+    return (
+      <h2>今天天气很炎热</h2>
+    );
+  }
+}
+```
+
+我们来看一下现在是不是已经可以改变`state`了
+
+![image-20211214173256911](https://file.lynchow.com/jinxuan/093259.png)
+
+我们从图中可以看出`state`已经变成了我们指定的对象。但是我们这么写了，我们这么用起来呢？我们之前也说了天气`炎热`还是`凉爽`取决于`isHot`。现在我们要做的就是从`state`中把`isHot`读取出来然后做判断了。
+
+那么怎么读？我们来分析一下：`state`在`Weather`组件的实例对象上，而`render`方法中的`this`指向的就是`Weather`组件的实例对象。那么是不是我们通过`this.state`就可以读取到`state`了呢？那我们试试呗？没病走两步：
+
+```jsx
+class Weather extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { isHot: true };
+  }
+
+  render() {
+    console.log(this);
+    return (
+      <h2>今天天气很{this.state.isHot ? "炎热" : "凉爽"}</h2>
+    );
+  }
+}
+```
+
+那么我们来看一下效果，然后把`isHot`改成`false`再看一下
+
+![image-20211214174201983](https://file.lynchow.com/jinxuan/094203.png)![image-20211214174303519](https://file.lynchow.com/jinxuan/094315.png)
+
+这下一看那我们确实已经成功地读取到了`state`并且用来驱动了页面。所以`state`的初始化和读取都已经完成了。
+
+但是我们目前还是不符合我们的需求啊，我们要点击文章来回切换的啊。那我们是不是就需要通过某些方法来是的我们这个`state`来进行一个动态的修改。而`state`一旦发生改变就会驱动页面发生改变，然后就可以满足页面上展示的内容动态改变。
+
+但是我们这里所说的某些方法又是指什么呢？这节课我们先不讨论这个问题。下节课我们再展开讨论怎么去动态改变`state`
+
+## 总结
+
+-   如果通过`state`驱动页面需要借助构造器方法
+-   构造器方法的参数官方规定的是`props`
+-   构造器方法要将`props`参数传给`super`
+-   `state`要传一个对象
+-   通过`this`来调用`state`