组件
React中的组件是可复用的代码块,其由JSX元素构成,并根据相关的逻辑和数据创建动态UI。
函数式组件 vs 类组件
React 中有两种类型的组件:函数式组件和类组件。
函数式组件通常情况下仅从 props 中获取输入并且返回一个 JSX 元素。这些组件主要是通过声明函数的方式定义的。例如:
function Greeting(props) {
return <h1>Hello, {
props.name}!</h1>;
}
类组件则是通过 ES6 class 语法来定义的。它们可以存储内部 state、订阅生命周期方法等等。例如:
class Greeting extends React.Component {
render() {
return <h1>Hello, {
this.props.name}!</h1>;
}
}
我们可以使用 propTypes 定义组件接受哪些属性以及每个属性的类型。例如:
import PropTypes from 'prop-types';
class Greeting extends React.Component {
static propTypes = {
name: PropTypes.string.isRequired
};
render() {
return <h1>Hello, {
this.props.name}!</h1>;
}
}
组件的使用
要使用定义好的组件,我们需要将它像普通 HTML 元素一样在 JSX 中使用:
<Greeting name="John" />
!!! 组件的名称必须以大写字母开头!!!
。
组合组件
React 的单向数据流使得让多个小组件组合形成大组件非常容易。例如:
function WelcomeBanner() {
return (
<div>
<Greeting name="John" />
<p>Welcome to our website!</p>
</div>
);
}
在这里,我们将两个组件 Greeting 和
组合到了一个 WelcomeBanner 中。