第五章在React中如何定义组件

一、安装react开发者工具

在开始之前，我们先做准备一下辅助工具，类似于Vue的开发者工具，React 开发者工具是一款浏览器扩展，可以帮助您在浏览器中调试 React 应用程序。

下面是如何安装 React 开发者工具的步骤：

打开 Google Chrome 浏览器，访问 Chrome Web Store。
在搜索框中输入 "React Developer Tools"，然后点击结果。
点击 “添加至 Chrome” 按钮。
点击 “添加扩展程序”。
安装完成后，可以在 Chrome浏览器的右上角看到 React 开发者工具图标。

现在，您可以在任何加载了 React 应用程序的页面中使用 React 开发者工具。

在这里插入图片描述

二、react函数式组件

React 函数式组件是 React 中一种编写组件的方式，它是一个 JavaScript 函数，可以接收 props 并返回要呈现的内容。与类组件不同，函数式组件不能存储状态，并且不能使用生命周期方法。

首先搭建一个基本的代码架子，然后在一步一步添砖加瓦

<body>
    <!-- 准备好员工“容器” -->
    <div id="app"></div>

    <!-- 引入ReactJS核心库 -->
    <script type="text/javascript" src="../JS/react.development.js"></script>

    <!-- 引入React-DOM核心库，用于操作DOM -->
    <script type="text/javascript" src="../JS/react-dom.development.js"></script>

    <!-- 引入Babel，用于编译jsx为js -->
    <script type="text/javascript" src="../JS/babel.min.js"></script>

    <!-- 此处类型为babel -->
    <script type="text/babel">
      // 1、函数式创建组件
		
      
      // 2、将虚拟DOM渲染到页面
 
    </script>
</body>

根据函数式的名字，我们以自己的理解,在script标签里面写一下代码

// 1、创建一个函数，里面返回使用jsx语法写的标签
function myFuncComponent () {
    return <h2>函数式组件，自己的理解</h2>
}

// 2、将虚拟DOM渲染到页面
ReactDOM.render(myFuncComponent,document.getElementId('app'))

此时将该代码运行在浏览器，浏览器并没有显示我们需要的内容，而是控制台报错了。

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

警告:函数作为React子函数无效。如果你从render中返回一个Component而不是<Component />，可能会发生这种情况。或者你想要调用这个函数而不是返回它。

该错误告诉我们渲染组件，需要使用标签闭合的方式，那么我们在修改一下：

// 1、创建一个函数，里面返回使用jsx语法写的标签
function myFuncComponent () {
    return <h2>函数式组件，自己的理解</h2>
}

// 2、将虚拟DOM渲染到页面
ReactDOM.render(<myFuncComponent/>,document.getElementId('app'))

此时控制台又有了新的错误：

Warning: <myFuncComponent /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. in myFuncComponent

Warning: The tag <myFuncComponent> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. in myFuncComponent

警告:<myFuncComponent />使用了不正确的大小写。React组件使用PascalCase, HTML元素使用小写。在myFuncComponent

警告:标签<myFuncComponent>在此浏览器中无法识别。如果你想渲染一个React组件，请以大写字母开始它的名称。在myFuncComponent

以上错误告诉我们，组件标签首字母要大写，我们在改一下：

// 1、创建一个函数，里面返回使用jsx语法写的标签
function MyFuncComponent () {
    return <h2>函数式组件，自己的理解</h2>
}

// 2、将虚拟DOM渲染到页面
ReactDOM.render(<MyFuncComponent/>,document.getElementId('app'))

此时终于在页面上渲染了我们想要的内容。开发者工具也捕获到了我们写的组件。

在这里插入图片描述

在函数式组件中，this指向是谁？

我们可以打印一下：

// 1、创建一个函数，里面返回使用jsx语法写的标签
function MyFuncComponent () {
    // 打印this指向
    console.log(this)
    
    return <h2>函数式组件，自己的理解</h2>
}

// 2、将虚拟DOM渲染到页面
ReactDOM.render(<MyFuncComponent/>,document.getElementId('app'))

结果：undefined

这里的this为什么是undefined呢？原因是我们这里使用了babel翻译，开启了严格模式，所以指向是undefined而不是window。

是不是真的开启了严格模式，我们可以到babel官方网站的Try it Out 试一试：

在这里插入图片描述

根据上图，我们知道是真的开启了严格模式，所以this指向是undefined。

总结函数式组件在React里面是怎么工作的

我们知道React是在ReactDOM.render(<MyFuncComponent/>...) 中进行工作的。那么做了哪些工作呢？

1、ReactDOM解析组件标签，找到了MyFuncComponent组件。
2、发现组件是使用函数式定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

三、类式组件

React 类式组件是另一种在 React 中编写组件的方式。它是一个 JavaScript 类，可以使用生命周期方法和状态来实现更复杂的功能。

首先同样搭建一个基本的代码架子，然后在一步一步添砖加瓦

<body>
    <!-- 准备好员工“容器” -->
    <div id="app"></div>

    <!-- 引入ReactJS核心库 -->
    <script type="text/javascript" src="../JS/react.development.js"></script>

    <!-- 引入React-DOM核心库，用于操作DOM -->
    <script type="text/javascript" src="../JS/react-dom.development.js"></script>

    <!-- 引入Babel，用于编译jsx为js -->
    <script type="text/javascript" src="../JS/babel.min.js"></script>

    <!-- 此处类型为babel -->
    <script type="text/babel">
      // 1、类式创建组件
		
      
      // 2、将虚拟DOM渲染到页面
 
    </script>
</body>

我们以自己的理解,在script标签里面写一下代码

参考官网文档，我们的类式组件需要继承React的Component

 // 1、类式创建组件
 class MyClassComponet extends React.Component{
     render() {
         return <h2>类式组件的定义</h2>
     }
 }		
      
 // 2、将虚拟DOM渲染到页面
 reactDOM.render(<MyClassComponet/>, document.getElementById('app'))

将此代码运行在浏览器中，发现可以加载出来内容，也没有报错，那是因为我们是参照官网的案例写的。但是我们还是要注意几点：

组件名称，首字母必须要大写
渲染组件时，要以标签的形式，且标签要闭合，否则会报语法错误。
定义类式组件时，类必须继承React的Component

接下来我们需要思考几个问题

1、类中的render方法来自哪里？

既然我们能够使用这个方法，说明我们一定能够在这个类里面找到它，我们直接在浏览器里面输入类的名称看看会发生什么？

在这里插入图片描述

我们发现类的原型对象上出现了render函数，既然组件要使用到这个方法，必然要new应该实例对象调用。

所以render方法是在类的原型对象上面，供实例对象调用的。

2、render方法中的this是谁？

想直接看到结果的方法就是我们在方法里面打印一下this，在一步一步研究。

 class MyClassComponet extends React.Component{
     render() {
         console.log(this)
         return <h2>类式组件的定义</h2>
     }
 }

结果：

在这里插入图片描述

有图可知，该this指向的是由MyClassComponent类new出来的实例，且实例的原型对象上就是render方法。

所以我们类中**render方法中的this**指向的是类的实例对象，也叫组件实例对象。

3、类式组件在React中是如何工作的？
1、第一步呢和函数式组件是一样的，React解析组件标签，找到了MyClassComponent组件
2、发现组件是类定义的，然后new出该类实例，并通过实例调用了原型上的render方法。
3、将render方法返回的虚拟DOM转为真实DOM，最后呈现在页面中。

本章小结

我们学习完React中函数式组件和类式组件，我们简单的回顾并总结一下它们到底有什么区别吧。

定义方式不同：一个是用函数定义的，一个是用类定义的，当然这是显而易见的。
this的指向不同：函数式组件的this是undefined，类式组件的this是指向组件实例对象。
性能不同：函数式组件通常比类式组件更快。显而易见，因为它们更简单，React可以更有效的优化它们。
代码风格不同：函数式组件倾向于使用简洁、声明式的代码风格，而类式组件则可以更灵活的实现复杂的功能。
状态不同：类式组件有状态，函数式组件无状态。状态是指组件内部的数据，可以通过this.state和setState方法管理。
生命周期方法不同：类式组件有生命周期方法，函数式组件无生命周期方法。生命周期方法是指在组件的生命周期内待定时刻调用的方法，如：componentDidMount和componentWillUnmount。

以上就是我们对函数式组件和对类式组件的总结和看法，当然最后两点需要通过后续学习来深入了解。在选择函数式组件还是类式组件时，请根据您的需求和代码风格进行决策。如果您需要处理状态或生命周期方法，则应该使用类式组件。如果您仅需要在屏幕上呈现数据，则可以使用函数式组件。