一、安装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 from render. Or maybe you meant to call this function rather than return it.
警告:函数作为React子函数无效。如果你从render中返回一个Component而不是，可能会发生这种情况。或者你想要调用这个函数而不是返回它。
该错误告诉我们渲染组件，需要使用标签闭合的方式，那么我们在修改一下：
// 1、创建一个函数，里面返回使用jsx语法写的标签 function myFuncComponent () { return <h2>函数式组件，自己的理解</h2> } // 2、将虚拟DOM渲染到页面 ReactDOM.render(<myFuncComponent/>,document.getElementId('app'))
此时控制台又有了新的错误：
Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. in myFuncComponent
Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. in myFuncComponent
警告:使用了不正确的大小写。React组件使用PascalCase, HTML元素使用小写。在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(...) 中进行工作的。那么做了哪些工作呢？
- 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 - 接下来我们需要思考几个问题
- 类中的
render方法来自哪里？
既然我们能够使用这个方法，说明我们一定能够在这个类里面找到它，我们直接在浏览器里面输入类的名称看看会发生什么？
我们发现类的原型对象上出现了render函数，既然组件要使用到这个方法，必然要new应该实例对象调用。
所以render方法是在类的原型对象上面，供实例对象调用的。
render方法中的this是谁？
想直接看到结果的方法就是我们在方法里面打印一下this，在一步一步研究。
class MyClassComponet extends React.Component{ render() { console.log(this) return <h2>类式组件的定义</h2> } }
结果：
有图可知，该this指向的是由MyClassComponent类new出来的实例，且实例的原型对象上就是render方法。
所以我们类中**render方法中的this**指向的是类的实例对象，也叫组件实例对象。
- 类式组件在React中是如何工作的？
- 1、第一步呢和函数式组件是一样的，React解析组件标签，找到了
MyClassComponent组件 - 2、发现组件是类定义的，然后
new出该类实例，并通过实例调用了原型上的render方法。 - 3、将
render方法返回的虚拟DOM转为真实DOM，最后呈现在页面中。
本章小结
我们学习完React中函数式组件和类式组件，我们简单的回顾并总结一下它们到底有什么区别吧。
- 定义方式不同：一个是用函数定义的，一个是用类定义的，当然这是显而易见的。
this的指向不同：函数式组件的this是undefined，类式组件的this是指向组件实例对象。- 性能不同：函数式组件通常比类式组件更快。显而易见，因为它们更简单，React可以更有效的优化它们。
- 代码风格不同：函数式组件倾向于使用简洁、声明式的代码风格，而类式组件则可以更灵活的实现复杂的功能。
- 状态不同：类式组件有状态，函数式组件无状态。状态是指组件内部的数据，可以通过
this.state和setState方法管理。 - 生命周期方法不同：类式组件有生命周期方法，函数式组件无生命周期方法。生命周期方法是指在组件的生命周期内待定时刻调用的方法，如：
componentDidMount和componentWillUnmount。
以上就是我们对函数式组件和对类式组件的总结和看法，当然最后两点需要通过后续学习来深入了解。在选择函数式组件还是类式组件时，请根据您的需求和代码风格进行决策。如果您需要处理状态或生命周期方法，则应该使用类式组件。如果您仅需要在屏幕上呈现数据，则可以使用函数式组件。
