文章标题

react组件

当一个组件，并没有额外的逻辑处理，仅仅只是用于数据的展示时，我们推荐使用函数式的方式来创建一个无状态组件。

我们结合简单的例子来理解。在项目的src目录里创建一个叫做helloWorld.jsx的文件。在该文件中，我们将创建一个正式的react组件，代码如下：

// src/helloWorld.jsx
import React from 'react';

const HelloWorld = () => {
return (
<div>Hello World!</div>
)
}

export default HelloWorld;

并在index.js中引入该组件。修改index.js代码如下：

// src/index.js
import React from 'react';
import { render } from 'react-dom';

// 引入HelloWorld组件
import HelloWorld from './helloWorld';

const root = document.querySelector('#root');

render(<HelloWorld />, root);

保存后运行，我们发现结果一样。

创建组件的两种方法：

1.无状态组件

使用props，适用于简单的数据展示，没有复杂的处理逻辑

2.state