React--4: 函数式组件

1. 函数式组件

我们就先写个函数然后将它渲染到界面

// 1.创建函数式组件
function demo(){
    return <h2>我是函数式组件，适用于简单的定义</h2>
}
// 渲染组件到界面
ReactDOM.render(demo, document.getElementById('root'))

界面是空白页，并且它报错说不是标签，那么我们给它改成组件标签。

// 渲染组件到界面
ReactDOM.render(<demo/>, document.getElementById('root'))

依旧报错，那么错在哪里呢？我们上个文章说到了，组件的标签首字母要大写。

将首字母改为大写

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 1.创建函数式组件
function Demo(){
    return <h2>我是函数式组件，适用于简单的定义</h2>
}
ReactDOM.render(<Demo/>, document.getElementById('root'))

我们可以看出效果出来了。

思考一下，这是个函数吗？答案肯定是。那是谁调用的呢？我们自己调用了吗？没有。是 React 帮我们调用的。

我们关注一下此时组件的 this 指向问题：
我们打印一下此时的 this

function Demo(){
    console.log(this)
    return <h2>我是函数式组件，适用于简单的定义</h2>
}

此时的 this 是 undefined

那么为什么呢？因为我们整个函数经过了 babel 的转换处理。并且这个过程是严格模式，在严格模式中，禁止自定义函数中的 this 指向window。因此变成了undefined。

我们去babel官网验证一下

可以看到，确实经历了严格模式。还有我们的中文变成乱码了？其实不是乱码，只是换了一种编码格式。

这个过程经历了什么？

• 首先，React解析组件标签，找到Demo组件。
• 发现组件是使用函数定义的，随后调用该函数，讲返回的虚拟DOM转为真实DOM，随后呈现在页面上。

2. react dev tools

这是React浏览器扩展工具。首先，需要翻墙工具。
大家可以去下载一下 这里

有了这个工具之后，就可以看到组件的结构了