react 函数式组件

上一篇博文我们稍微说了一下 react 开发者工具的安装，主要目的是使用他才管理组件很好用，那啥是组件呢？本篇博文稍微说一下。

组件

react 官方提供了两种定义组件的方式：

函数式组件：适用于简单组件定义。
类式组件：适用于复杂组件定义。

今天主要说函数式组件，因为他比较简单。

函数式组件

首先我们写一个函数式组件，顾名思义，函数式组件一定是个函数，我们先写一个简单的函数。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数式组件</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持 react 操作 dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 label，用于将 jsx 转化为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 1. 创建函数式组件
        function demo() {
           
        }
    </script>

</body>

</html>

好的，函数写完了，我们要写函数里面的东西，函数里面的东西怎么写呢？之前一篇博文说过：组件用来实现局部功能效果的代码的资源集合。 所以说，一个组件有 html，css，js，img资源等等一堆东西，但是呢，有些可能用不到没关系啦，最基本的组件 html 得有是吧？不能没有 html 这个架子，不然就没有意义了。

OK，那我们直接在函数里面返回一个 html，然后给他渲染一下。

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 1. 创建函数式组件
        function demo() {
            return <h1>我是用函数定义的组件，适用于简单组件的定义</h1>
        }
        // 2. 渲染组件到页面
        ReactDOM.render(demo, document.getElementById('app'))
    </script>

ok ，上面代码编写完成，保存刷新查看效果。

在这里插入图片描述数据没渲染，控制台报错了，为啥报错呢？其实是因为我们不能直接绑定 demo，因为之前博客说过：若为小写字母开头，则将该标签转为 html 中同名元素，若 html 中无同名元素则报错。 因为 html 没有同名的 demo 标签，所以报错了，所以说我们需要转成标签绑定。

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 1. 创建函数式组件
        function Demo() {
            return <h1>我是用函数定义的组件，适用于简单组件的定义</h1>
        }
        // 2. 渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('app'))
    </script>

我们把demo 转成了标签绑定，记住，标签需要闭合，然后之前博客里面还有一句话：若为大写字母开头，react 就去渲染对应的组件，若没有组件，嘿嘿，报错！ 所以说我们对函数和标签都要首字母大写处理。

保存刷新！

在这里插入图片描述

组件数据展示出来了，同时控制台也没有报错。对了，上篇博文不是安装开发者工具了吗？

在这里插入图片描述

可以看到，组件出来了！ demo组件可以正常使用。

注意：

Demo 组件中的 this 是 undefined，不是 window，因为 babel 转换之后是开启严格模式的，阻止了 this 指向 window。
执行ReactDOM.render 之后，React 做了两件事情：第一，解析组件标签，找到 Demo 组件；第二，发现组件是使用函数定义的，随后调用函数，将返回的虚拟dom转为真实dom呈现在页面。

今天就到这里，拜拜！

【本博文相关代码资料】：我是𝒆𝒅. 的 gitee

# react 函数式组件

react 函数式组件

组件

函数式组件