1: React 组件中复杂组件和简单组件
react 组件复杂组件和简单组件:
有状态的组件就是复杂组件。 无状态的组件就是简单组件
什么是有状态组件? 什么是无状态组件?
对比:
人 状态 影响 行为
组件 状态 驱动 页面
我们的数据放在放在组件的state 里边, 状态改变驱动虚拟DOM该变, 从而驱动页面的改变。
// 创建一个容器
<div id="test"><div/>
<script type="text/babel">
// 1: 创建类组件
class MyComponent extends Component {
render() {
return <h2>我是用类定义的组件, 适用于复杂组件的定义</h2>
}
}
// 2: 将类组件渲染到页面
reactDOM.render(<MyComponent />, document.getElementById('test'));
</script>
// 函数式组件也叫做无状态组件, 因为函数式组件中的this: 指向undefined
为什么指向undefined? 因为在函数组件中写的是jsx 语法, jsx 语法要经过babel.js 翻译
开启了严格模式: 所以this ==> 指向了undefined
// 但是类组件 ==> 也叫做有状态组件, 因为定义类组件需要继承React.Component 父类组件
在类组件中必须要有render 函数, render 函数必须要有返回值, 返回值就是VDOM
但是在类组件中的this 指向创建类组件的实例对象。 在这个实例对象中, 有props, 属性
state: 属性, refs 属性
// 类式组件的三大属性:
props 属性, refs 属性, state 属性
状态既是数据, 就是数据改变影响虚拟DOM 的改变。 虚拟dom 改变影响 页面dom 改变。