9.React 函数式组件

最新推荐文章于 2023-02-01 14:59:25 发布

凯扣叮~

最新推荐文章于 2023-02-01 14:59:25 发布

阅读量1.6k

点赞数 1

分类专栏： React学习笔记开发工作文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_42156063/article/details/121978421

版权

React学习笔记同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

开发工作

14 篇文章 0 订阅

订阅专栏

在React的组件渲染上，有两种方式，一种是函数式组件，一种是类式组件。
顾名思义，函数式组件即以函数的方法书写组件。类式组件是以类的形式书写组件。
这里记录函数式组件的书写规则及注意点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数式组件</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
    function MyComponent(){
        console.log(this);//此处的this是undefined，因为babel编译后开启了严格模式
        return <h2>这是一个函数定义的组件（适用于简单组件的定义）</h2>
    }

    ReactDOM.render(<MyComponent/>,document.getElementById('test'))

    // 执行了ReactDOM.render(<MyComponent/>,doucument.getElementById("test")) ……之后发生了什么？
    // 1、React解析组件标签后，找到了MyComponent组件。
    // 2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，渲染到页面中。
    // 注意点：
    // 1、函数式组件的名称首字母必须大写。
    // 2、必须写组件标签，不能是函数名或函数调用。
</script>
</body>
</html>

时时记，日日新。
日日记，时时忆。

凯扣叮~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
9.React 函数式组件

在React的组件渲染上，有两种方式，一种是函数式组件，一种是类式组件。顾名思义，函数式组件即以函数的方法书写组件。类式组件是以类的形式书写组件。这里记录函数式组件的书写规则及注意点。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数式组件</title> <script src="https://unpkg
复制链接

扫一扫