React基础3

定义组件的两种方式

函数式组件

执行了ReactDOM.render(<MyComponent/>,document.getElementById("test"))之后发生了什么？
1.React解析组件标签，找到MyComponent组件
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中

类式组件

执行了ReactDOM.render(<MyComponent/>,document.getElementById("test"))之后发生了什么？
1.React解析组件标签，找到MyComponent组件
2.发现组件是使用类定义的，随后new出来该组件的实例，并通过该实例调用到原型上的render方法
3.将render方法返回的虚拟DOM转化为真实DOM，随后呈现在页面中

组件实例的三大核心属性之一state

在定义类式组件时通过输出MyComponent组件中render函数的this指向可以发现state状态是存在于组件实例对象上

下面通过一个案例来感受一下state的工作方式：实现页面输出“今天天气很炎热/凉爽”，鼠标点击此标题动态切换炎热和凉爽

现在，已经可以通过改变isHot的值改变页面显示的状态，也就是已经完成了状态的初始化和读取并使用状态

现在，已经实现了为元素添加点击事件，接下来只需要在demo函数的回调中更改isHot的值将其取反，那么下面先尝试在demo()函数中读取isHot




解决类中的this指向问题：


最后，完整实现所有需求：


state的简写方式：

总结

• state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）
• 组件被称为状态机，通过更新组件的state来更新对应的页面显示（重新渲染组件）
• 组件中render方法的this指向是组件实例对象
• 状态数据不能直接修改或更新，必须通过setState进行更改，且更新操作是合并不是替换
• 组件自定义方法在作为事件的回调时，其this指向是undefined，解决办法：
  • a.在构造器中通过函数对象的bind方法强制绑定this
  • b.通过类中的赋值语句+箭头函数的形式