一、类组件
类组件的代码使用方式如下所示:
class Son extends React.Component {
constructor() {
super();
this.state = {
n: 0
};
}
add() {
this.setState({ n: this.state.n + 1 });
}
render() {
return (
<div className="Son">
儿子n :{this.state.n}
<button onClick={() => this.add()}>+1</button>
<Grandson />
</div>
);
}
}
1.类组件创建类后必须要继承React.Component
2.必须要有render 函数,返回的是react标签
3.render 中必须有return
ReactDOM.render('类组件名', 'DOM对象')
/*
react可以调用ReactDOM.render方法将自定义的类组件放入真实dom中进行渲染,具体步骤如下所示:
1.react解析组件标签,判断组件类型,类组件自动new一个类组件实例
2。调用类组件中的render函数
3.将render中返回的虚拟dom渲染到真实dom中
*/
二、函数组件
const Grandson = () => {
const [n, setN] = React.useState(0);
return (
<div className="Grandson">
孙子n:{n}
<button onClick={() => setN(n + 1)}>+1</button>
</div>
);
};
函数组件也跟类组件一样使用ReactDOM.render方法在真实DOM容器中进行渲染
注意! 在函数组件中的this指向并不是指向window,因为react开启了Babel严格模式,严格模式最大的特点就是禁止this指向window;因此在函数组件中this指向undefined
二者的区别所在
1.类组件有生命周期,函数组件没有
2.类组件需要继承 Class,函数组件不需要
3.类组件可以获取实例化的 this,并且基于 this 做各种操作,函数组件不行
4.类组件内部可以定义并维护 state, 函数组件为无状态组件(可通过hooks进行实现)
相比较类组件,函数组件优点是更加轻量与灵活,便于逻辑的拆分复。
函数组件捕获了渲染时所使用的值,这是两类组件最大的不同。
React框架做的本质工作就是吃入数据,吐出UI,把声明式的代码转换为命令式的 DOM 操作,把数据层面的描述映射到用户可见的 UI 变化中去。
React的数据是和渲染绑定在一起的,而类组件是无法做到这一点