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