菜园前端

Appearance

开始我的第一个组件 ​

其实 React 并不陌生

可以理解编写一个 React 组件，就相当于是我们平时编写 HTML 一样，唯一区别在于它是在 JavaScript 中编写的 HTML 代码。

如何理解 React 组件 ​

假设我们要编写一个天气组件，在平时的开发中可能会写成这样：

html
<article>
    <h1>天气预报</h1>
    <ol>
        <li>温度：36°C</li>
        <li>天气：晴天</li>
        <li>风速：3km/h</li>
    </ol>
</article>

而在 React 组件中则是这样的：

jsx
export default function Weather() {
    return (
        <article>
            <h1>天气预报</h1>
            <ol>
                <li>温度：36°C</li>
                <li>天气：晴天</li>
                <li>风速：3km/h</li>
            </ol>
        </article>
    )
}

从上面的代码可以看出，这两者其实差不多的，只不过 React 组件是在 function 里面 return 出来的，这样也挺好理解的。

当然啦，这样肯定有它的优势，因为它是在 JavaScript 里面编写的 HTML 代码，所以可以更加容易的实现数据的动态绑定以及一些交互功能，下面将进行一些调整。

jsx
export default function Weather() {
    /**
     * 模拟接口数据
     */
    const data = {
        temperature: '36°C',
        weather: '晴天',
        windSpeed: '3km/h'
    }

    return (
        <article>
            <h1>天气预报</h1>
            <ol>
                <li>温度：{data.temperature}</li>
                <li>天气：{data.weather}</li>
                <li>风速：{data.windSpeed}</li>
            </ol>
        </article>
    )
}

通过 React 组件进行渲染会更加的简单。

如果使用传统的方式，则是先给对应的 dom 加上 id 属性 ，还需要在 JavaScript 代码里面获取对应的 dom 在进行赋值，而且这是只是简单的赋值，如果是复杂的交互逻辑实现起来会更加的麻烦。

下面将介绍一些组件的注意事项。

React 组件必须要导出 ​

首先是 React 组件必须要有导出 export default

一个 .jsx 文件可以定义多个 React 组件，但是强烈建议最终只导出一个 React 组件，这样不仅方便后续的维护，也方便进行复用。

jsx
export default function Weather() {
    return (
        <article>
            <h1>天气预报</h1>
            <ol>
                <li>温度：36°C</li>
                <li>天气：晴天</li>
                <li>风速：3km/h</li>
            </ol>
        </article>
    )
}

React 组件必须要大写字母开头 ​

React 组件必须要大写字母开头，例如 function Weather ，而不能是 function weather 。因为 React 会将小写字母开头的组件当成 HTML 标签，例如 <div> <article> <h1> 等等 。

React 组件的文件名字也建议大写驼峰形式。

React 组件返回格式 ​

当 React 组件需要返回多个根元素的时候，需要使用 <> 标签包裹起来。

jsx
export default function Indicator() {
    return (
        <>
            <li>温度：36°C</li>
            <li>天气：晴天</li>
            <li>风速：3km/h</li>
        </>
    )
}

当用 return 返回多行内容时，建议用 () 包裹起来，避免导致一些不必要的错误。

嵌套 React 组件 ​

React 组件可以嵌套使用，例如可以在 <Weather /> 组件里面嵌套 <Indicator> 组件。

jsx
/**
 * 天气模块组件
 */
function Indicator() {
    return (
        <>
            <li>温度：36°C</li>
            <li>天气：晴天</li>
            <li>风速：3km/h</li>
        </>
    )
}

export default function Weather() {
    return (
        <article>
            <h1>天气预报</h1>
            <ol>{<Indicator />}</ol>
        </article>
    )
}

警告

但是千万不要在组件内部定义组件，这样会导致组件的渲染性能降低，并且很容产生 BUG。

jsx
export default function Weather() {
    function Indicator() {
        return (
            <>
                <li>温度：36°C</li>
                <li>天气：晴天</li>
                <li>风速：3km/h</li>
            </>
        )
    }

    return (
        <article>
            <h1>天气预报</h1>
            <ol>{<Indicator />}</ol>
        </article>
    )
}