sgg-react编程11-20

函数作为组件,其中函数名就是组件的名。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_类式组件</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 MyComponent extends React.Component {
			render(){
				//render是放在哪里的?—— MyComponent的原型对象上,供实例使用。
				//render中的this是谁?—— MyComponent的实例对象 <=> MyComponent组件实例对象。
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
		    用类定义组件必须满足的条件:
			1.必须继承父类
			2.必须写render
			3.render必须有返回值
			执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么?
					1.React解析组件标签,找到了MyComponent组件。
					2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
					3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
		*/
	</script>
</body>
</html>

我们关注的三大属性:

在我看不到的位置其实是存在类的实例的。

	/* 
		    用类定义组件必须满足的条件:
			1.必须继承父类
			2.必须写render
			3.render必须有返回值
			执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么?
					1.React解析组件标签,找到了MyComponent组件。
					2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
					3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
		*/

---11---

组件是有状态state的就是复杂组件,其余的为简单组件。

组件的状态存数据,数据改变驱动界面展示。

有很多的属性:组件的三大属性。

状态是组件实例身上的。

怎么放进去的呢,源自继承的类。

---12---

天气很炎热凉爽炎热:

想办法把isHot的值放在状态里面。

 

state是自带的。 

 

---13---

state就是一组一组的key和value,有状态的state就是复杂的组件,其余的是简单的组件。

js的点击:

函数:

   

加小括号是一个函数调用语句,去掉是作为函数的回调。

  

 注意这里不加小括号,是函数整个的赋值 ,加小括号是返回值的赋值。

---14---

 

babel开启严格模式,禁止自定义的函数的this指向window。不开启严格模式,自定义方法里面的this是指向的window也不要实例。

render里面的this是组件的实例对象。

为什么这个this是undenfind

---

类中方法的this的指向:

调用study一定要加this

搞明白一个问题:

 

 构造器的this一定是当前的实例对象。

只有p1.study可以找到它

类中调用的方法就是严格模式,不敢指向window所以就是undefind。

x()就不是通过person调用study了。

 

 

类里面定义方法本身开启了严格模式

 bable看着

---

15---

  

     方法放在原型上了,bind修改this就是实例。手里握着函数,里面的this变为了实例。这个方法变成了实例本身的方法。

解决指向问题了。

看到自身和原型都有有changewether。

 拿着原型的生产新的,挂在实例上。

---16---

这样是不管用的因为状态里面的数据是不能进行直接的更改的。 

状态是不能直接更改的,要借助内置的api进行更改。

react修改对象用setState 

 

 

 

---17---

state的简写方式:

我们看下,这里changeWeather根本不是new的实例调用的,是作为事件的回调来使用的。

 

这么写就变为类的实例的成员变量了。 类里面直接定义方法是放在原型对象上的,类的实例是没有的。

这么写?

 

把函数拉出来直接调用,类里面的方法开了严格模式了。

箭头函数的this会找到其外层的this的就是对象的实例。

 ---18---

state最难的我们总结下:

 

 

---19---

就是这个属性

 

 

 

---20---

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值