目录
5.利用react类定义虚拟dom方法对模块中HTML标签内容的修改,实现点击文字部分内容发生改变
1、函数式组件
通过.render渲染方法解析组建标签作为虚拟dom标签调用函数组件内容渲染到页面当中
2、原型链
JS中实例化的一个class类方法，实例化的对象身上会因为定义了类而生成prototype原型对象，通过构造函数实例化一个对象利用对象的prototype属性也能找到原型对象，找到以后可以利用其中的定义到proto上的方法去继承调用共有属性。
总结：类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。类中所定义的方法，都放在了类的原型对象上，供实例去使用，利用extend方法去继承父父类中的构造器和方法，通过super去调用父类构造器中存在的值
3、 原型链查找机制
每当代码读取某个对象的某个属性时，都会执行一次搜索目标是具有给定名字的属性： 1．搜索首先从对象实例本身开始 2．如果在实例中找到了具有给定名字的展性,则返回该属性的值 3．如果没有找到，则继续沿原型链上寻的原型对象，在原型对象中查找具有给定名字的属性
4．如果在原型对象中找到了这个属性，则返回该属性的值，没有找到继续上寻到object对象，找到返回没找到就报错
4、类式组件
注意点:1、定义类式组件必须使用继承extend react.componet父类；2、返回值为虚拟dom标签，3、执行了ReactDOM.render(<MyComponent/>.......之后，发生了 React解析组件标签，找到了MyComponent组件。发现组件是使用类定义的，随后根据react库自动new出来该类的实例，并通过该实例调用到原型上的render方法。将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
5.利用react类定义虚拟dom方法对模块中HTML标签内容的修改,实现点击文字2部分内容发生改变
1、 组件中render方法中的this为组件实例对象
2、state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)，但其身上的state状态数据，不能直接修改或更新，只能通过继承react原型链上的Setstate方法来更改状态数据且其数据方法为object
3、创建的虚拟dom的方法中返回值的事件绑定调用的方法是利用jsx格式书写this.changeWeather是调用其类本身的changeWeather方法，，当我们不能直接调用类本身的方法因为类局部方法具有严格模式，我们采用在构造器中定义一个this.changeWeather方法,让其一开始的this指向就面对模块类，调用时就能直接查找到changeWeather方法
4、每一次点击就调用weather方法通过修改布尔值，重新调用render方法创建虚拟dom覆盖原来的标签
注意:
1、react将事件源中所有名字进行了修改：onclick-->onClick、onblue-->onBlue、mouseover-->mouseOver,类似驼峰命名法第二个单词首字母大写
2、类中局部定义的所有方法都开启了严格模式，当我们不使用类实例化对象的方法去调用时一定.log出undefined
3、利用构造器初始化state的状态，利用构造器解决类局部严格模式this指向丢失问题
5、类方法中的this指向问题
p1.study()通过实例化对象方法去查询p1实例化原型对象上的study方法输出结果，该this指向的是实例化的person，而利用x()方法查询赋值过来的函数时x的身上并无study且x()方法属于直接调用查询p1.study方法由于类局部严格模式将直接输出未定义
6、.bind()方法
是ECMAScript新增加的一个方法，主要作用是改变this指向。bind()是Function.prototype上的一个方法，所以调用它的只能是一个方法，bind会将调用它的方法里面的this指向
this.changeWeather = this.changeWeather.bind(this)右边的赋值意义为：首先this指向定义的类，类当中具有changeWeather方法然后改变类当中this指向将changeWeather方法中的this指向到当前类/组建模块当中
7、对于react三大实力对象state状态机解释
state表示react组件内部的一种状态，通过组件内的getInitialState函数，可以为组件的初始状态赋值，当组件的状态发生改变时，组件会重新渲染。官方对state的说明如下：
组件其实是状态机（State Machines） React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态，可以轻松让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。React 来决定如何最高效地更新 DOM。
但是state状态的修改并不会直接对页面内容进行渲染需要对setState进行更新,且更新是一种合并，不是替换。
this.setState({isHot:!isHot})
详细解释点击链接了解http://t.csdn.cn/dmH8n
第五点案例源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
//构造器调用几次？ ———— 1次
constructor(props){
console.log('constructor');
super(props)
//初始化状态
this.state = {isHot:false,wind:'微风'}
//解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
}
//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
render(){
console.log('render');
//读取状态
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
//changeWeather调用几次？ ———— 点几次调几次
changeWeather(){
//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
console.log('changeWeather');
//获取原来的isHot值
const isHot = this.state.isHot
//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
this.setState({isHot:!isHot})
console.log(this);
//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
//this.state.isHot = !isHot //这是错误的写法
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>
246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
