函数作为组件,其中函数名就是组件的名。
<!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---