阅读时间： 6 分钟
Reactjs是一个用于构建用户界面的JavaScript库。现在，我们将学习 react js 的组件。
组件让你把用户界面分割成独立的、可重用的部分，并孤立地考虑每一块。本页对组件的概念进行了介绍
从概念上讲，组件就像JavaScript函数。它们接受任意的输入（称为 "props"），并返回React js元素，描述屏幕上应出现的内容。
React js组件的类型
在React js中，有两种主要的组件，它们是
- 有状态组件
- 无状态组件
有状态的组件
任何组件都被称为有状态的组件，这些状态可以在组件的整个生命周期的任何地方被改变。通过这个名字本身，我们可以了解它的行为。
在这些组件中。有状态的组件是基于类的组件。在基于类的组件中，我们将创建一个类，在那里我们将扩展核心反应库。
在这里，一旦我们用一个特定的类名创建了一个组件，我们就可以通过调用<组件类名/>来使用它，它看起来非常像其他的HTML标签。
例子。
import React from 'react';
import ReactDOM from 'react-dom';
classComponents 延伸自 React.Component {
构造函数() {
超级()
this.state = {
msg: "在任何地方使用我"
}
}
render() {
返回 (
{this.state.msg}。
);
}
}
ReactDOM.render(
, document.getElementById('root')
);
无状态组件
这些组件的所有属性都是固定的，在组件的整个生命周期内不会改变。通过名字本身，我们可以了解它的行为。这是一个无状态组件，它的类中所有的东西都是静态的。
例子。
在下面的例子中，我们正在开发一个没有状态的反应组件，它包含应用优惠券的规则。
代码。
import React from 'react';
import ReactDOM from 'react-dom';
classComponents 延伸自 React.Component {
constructor() {
render() {
返回 (
应用优惠券的条件：
。- 如果你是第一次订购。
- 最小的订单金额>1000 。
);
}
}
ReactDOM.render(
, document.getElementById('root')
);
组件的生命周期
这三个阶段是。安装、更新和卸载。
安装
安装意味着将元素放入DOM中。
React有四个内置方法
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()
render()方法是必须的，并且会一直被调用，其他的是可选的，如果你定义了它们，就会被调用。
构造函数
构造函数()方法首先被调用。
constructor()方法是和props一起调用的，你应该总是从调用super(props)开始。
这将启动父级的构造函数方法，并允许组件从其父级（React.Component）继承方法。
例子。
每次你制作一个组件时，React都会调用构造函数方法。
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
render() {
返回 (
我最喜欢的颜色是{this.state.favoritecolor}
。);
}
}
ReactDOM.render(
, document.getElementById('root'))。getDerivedStateFromProps
getDerivedStateFromProps()在DOM中渲染元素的前一步被调用。
这是在初始道具的基础上设置状态对象的自然位置。
它把状态作为一个参数，并返回一个带有状态变化的对象。
这个例子开始时，最喜欢的颜色是 "红色"，getDerivedStateFromProps()方法根据favcol属性更新最喜欢的颜色。
例子。
class Header extends React.Component {
构造函数(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
render() {
返回 (
我最喜欢的颜色是{this.state.favoritecolor}
。);
}
}
ReactDOM.render(
, document.getElementById('root'))。渲染
render()方法是必须的，它是将HTML实际输出到DOM的方法。
例子。
一个简单的组件，有一个简单的render()方法。
class Header extends React.Component {
render() {
返回 (
这是Header组件的内容
。);
}
}
ReactDOM.render(
, document.getElementById('root'))。更新
React有五个内置方法
- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
render()方法是必须的，并且会一直被调用，其他的是可选的，如果你定义了它们，就会被调用。
getDerivedStateFromProps
在更新时，getDerivedStateFromProps()方法被调用。
这是在一个组件被更新后被调用的第一个方法。
这是在初始道具的基础上设置状态对象的自然地方。
这个例子有一个按钮，把最喜欢的颜色改为蓝色，getDerivedStateFromProps()方法被调用。
该方法用favcol属性的颜色来更新状态。
例子。
如果组件被更新，getDerivedStateFromProps()方法会被调用。
class Header extends React.Component {
构造函数(props) {
super(props);
this.state = {favoritecolor: "red"};
}
static getDerivedStateFromProps(props, state) {
return {favoritecolor: props.favcol };
}
changeColor = () => {
this.setState({favoritecolor: "blue"})。
}
render() {
返回 (
我最喜欢的颜色是{this.state.favoritecolor}
。改变颜色。
);
}
}
ReactDOM.render(
, document.getElementById('root'))。shouldComponentUpdate
shouldComponentUpdate()方法可以返回一个布尔值，指定 "React "是否应该继续渲染。
默认值是true。
例子。
在任何更新时停止组件的渲染。
class Header extends React.Component {
构造函数(props) {
super(props);
this.state = {favoritecolor: "red"};
}
shouldComponentUpdate() {
return false;
}
changeColor = () => {
this.setState({favoritecolor: "blue"})。
}
render() {
返回 (
我最喜欢的颜色是{this.state.favoritecolor}
。改变颜色。
);
}
}
ReactDOM.render(
, document.getElementById('root'))。例子。
class Header extends React.Component {
构造函数（props） {
super(props);
this.state = {favoritecolor: "red"};
}
shouldComponentUpdate() {
返回true。
}
changeColor = () => {
this.setState({favoritecolor: "blue"})。
}
render() {
返回 (
我最喜欢的颜色是{this.state.favoritecolor}
。改变颜色。
);
}
}
ReactDOM.render(
, document.getElementById('root'))。渲染
render()方法在一个组件被更新后被调用，它必须将HTML重新渲染到DOM中。
下面的例子有一个按钮，将最喜欢的颜色改为蓝色。
例子。
点击该按钮，对组件的状态进行改变。
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritecolor: "red"};
}
changeColor = () => {
this.setState({favoritecolor: "blue"})。
}
render() {
返回 (
我最喜欢的颜色是{this.state.favoritecolor}
。改变颜色。
);
}
}
ReactDOM.render(
, document.getElementById('root'))。getSnapshotBeforeUpdate
在getSnapshotBeforeUpdate()方法中，你可以访问道具和状态，这意味着即使在更新后，你也可以检查更新时的值。
下面的例子可能看起来很复杂。
组件被安装后，它被渲染成最喜欢的颜色 "红色"。在组件被安装后*，*一个定时器改变了状态。一秒钟后，最喜欢的颜色变成了 "黄色"。
这个动作触发了更新阶段，这个组件有一个getSnapshotBeforeUpdate（）方法。
这个方法被执行，并向空的DIV1元素写入一条信息。
componentDidUpdate()方法执行后，在空的DIV2元素中写入一条信息。
例子。
class Header extends React.Component {
构造函数(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"更新前，最爱是" + prevState.favoritecolor。
}
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"更新后的最爱是" + this.state. favoritecolor。
}
render() {
返回 (
我喜欢的颜色是 {this.state.favoritecolor}
);
}
}
ReactDOM.render(
, document.getElementById('root'))。componentDidUpdate
componentDidUpdate方法是在组件在DOM中被更新后调用的。
组件正在安装，它被渲染成最喜欢的颜色 "红色"。
组件*被安装后，*一个定时器改变了状态，颜色变成了 "黄色"。
这个动作触发了更新阶段，这个组件有一个 componentDidUpdate 方法。
这个方法被执行，并在空的DIV元素中写入一个信息。
例子。
componentDidUpdate方法在更新在DOM中被渲染后被调用。
class Header extends React.Component {
构造函数(props) {
super(props);
this.state = {favoritecolor: "red"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritecolor: "yellow"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"更新的收藏夹是" + this.state.favoritecolor。
}
render() {
返回 (
我喜欢的颜色是 {this.state.favoritecolor}
);
}
}
ReactDOM.render(
, document.getElementById('root'))。解除挂载
生命周期的下一个阶段是在组件从DOM中移除之后，或者说React喜欢称之为卸载。
React只有一个内置的方法，在组件被卸载后被调用。
- componentWillUnmount()
componentWillUnmount
componentWillUnmount方法在组件从DOM中移除后被调用。
例子。
点击按钮，删除标题。
class Container extends React.Component {
构造函数(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false})。
}
render() {
让myheader。
如果（this.state.show） {
myheader = ;
};
返回 (
{myheader}
Delete Header。
);
}
}
class Child extends React.Component {
componentWillUnmount() {
alert("名为Header的组件即将被卸载。")。
}
render() {
返回 (
你好，世界！
。);
}
}
ReactDOM.render(, document.getElementById('root'))。
总结
在这篇博客中，我们已经了解了react js的组件的概念，其类型和组件的生命周期。
想了解更多关于组件的信息，可以访问这里
