React(3-1)：组件基础

组件基础

定义组件

函数组件

只需要定义一个返回 React Dom 的函数，便可以定义组件。

function Hello()
{
    return <h1>hello, world!</h1>;
}

函数组件有一个 props 参数用于传递数据：

function Hello(props)
{
    return <h1>hello, {props.name}!</h1>;
}

类组件

也可以通过一个类来定义组件，并编写渲染函数。

同样的，组件中的数据便会通过 this.props 进行传递。

class Welcome extends React.Component {
  render() {
    return <h1>hello, {this.props.name}!</h1>;
  }
}

使用组件

使用组件的方式很简单，只需要在 jsx 中作为 tag 传入即可。

对于组件中的数据，可以使用类似 html 属性的方式来传入。

function Hello(props)
{
    return <h1>hello, {props.name}!</h1>;
}

function Page()
{
    return <Hello name="world" />; // 使用组件
}

组件甚至可以使用多次：

function Hello(props)
{
    return <h1>hello, {props.name}!</h1>;
}

function Page()
{
    return (
        <div>
            <Hello name="foo" />
            <Hello name="bar" />
        </div>
    ); // 使用组件
}

组件名称规范

在 React 中，组件名必须以大写开头，因为 React 会将以小写字母开头的组件视为原生 DOM 标签。^[1]

props 是只读的

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。^[1:1]

但是界面是动态的，组件总是在变化的，但 props 是不能变的。

也就是说，除了 props，我们还需要一种"东西"，来保存组件内的其他数据。这种东西便是状态(state).

事件和插槽

自定义事件

React 本身没有自定义事件，但可以通过向 props 传递函数的方式来模拟自定义事件。

插槽

有时候我们希望向组件传递一些内容，类似这样：

<Row>这是一行</Row>

如果使用过 Vue，我们可以使用插槽技术来完成这一功能。

而 React 并没有插槽功能，要完成这个功能得通过一个特殊的 prop 称为 children：

function Header(props)
{
    return <h1>{props.children}</h1>
}

const el = <Header>好家伙</Header>

有时候我可能需要不只一个位置，那么，我们只能自己来设置几个 props 来完成这一功能了：

function Panel(props)
{
    return (<div><h1>{props.title}</h1><div>{props.children}</div></div>)
}

const title = <font color="red">这是标题</font>

const el = <Panel title={title}>这是内容</Panel>

万物皆属性

从上面的内容可以看出，组件中无论是事件，还是插槽，都是通过 props 来实现的。

对于插槽，prop 的类型为 React DOM 或者 React DOM 的数组。

对于事件， prop 的类型为函数。

组件的生命周期

React 组件完整的生命周期可以参考：

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

组件的生命周期主要分为三部分： 组件挂载、组件更新、组件销毁。

组件的生命周期函数用于类组件，写在类的定义中。

组件挂载

组件挂载：组件将会出现在 html 页面中

在这个阶段，主要有两个生命周期函数：

constructor(props) 类组件的构造函数，当组件被创建时调用。
componentDidMount 类组件挂载完毕时调用。

组件更新

组件更新：当组件需要刷新 UI 界面时

在这个阶段，主要有两个生命周期函数：

boolean shouldComponentUpdate(nextProps, nextState) 用于判断组件是否需要更新，需要返回 true，否则返回 false
componentDidUpdate(prevProps, prevState, snapshot) 组件更新完毕后调用。

组件卸载

组件挂载：组件将会从 html 页面中消失

在这个阶段，主要有一个生命周期函数：

componentWillUnmount 组件将要卸载时调用。

组件 - React ↩︎ ↩︎