目录
1、函数式组件
2、原型链
3、 原型链查找机制
4、类式组件
5.利用react类定义虚拟dom方法对模块中HTML标签内容的修改,实现点击文字部分内容发生改变
5、类方法中的this指向问题
6、.bind()方法
7、对于react三大实力对象state状态机解释
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)