组件

组件是React中最核心的概念，它将一个网页，拆分成一个个组件，是面向UI的，而不是像以往一样面向模块。面向模块就好比你把各个不同的功能代码解耦出来分成的不同的子模块这样。

环境配置

因为我是用umi构建reactJS应用的，所以只需要在umi的配置中加入react插件即可
umi-plugin-react插件是umi官方基于react封装的插件，包含了13个常用的进阶功能。

添加插件

tyarn add umi-plugin-react --dev

添加成功

添加成功
接下来，在config.js文件中引入该插件：
在这里插入图片描述

定义组件

定义一个HelloWorld组件

//第一步，导入React
import React from 'react'; 

//第二步 定义组件，让其继承React.Component这个类
class HelloWorld extends React.Component{
	//第三步 重写render方法，渲染页面
     render(){
          return <div>hello world!</div>; 
     }
}

//第四步 导出该类
export default HelloWorld;

注意事项

值得注意的是，render()方法中返回的是JSX的语法格式，就相当于在JS中写html这样。实际上框架会自动帮你执行creatElement这种创建DOM的方法。
而且，返回的只能是用单一标签包裹的内容。如果用

//错误
<div>xxxx</div><div>xxxx</div> 

//正确
<div>
	<div>xxxx</div>
	<div>xxxx</div> 
</div>

创建另一个组件

import React from 'react' 
import HelloWorld from './HelloWorld'

class Show extends React.Component{
    render(){
        return <HelloWorld></HelloWorld> //使用Helloworld组件
    }
}

export default Show

在这里插入图片描述

组件间传递参数

组件是可以传递参数的，有2种方式传递，分别是属性和标签包裹的内容传递，具体使用如下：

传递参数

 return <HelloWorld name='zhw'>scau</HelloWorld> //使用Helloworld组件

其中，name="zhw"就是属性传递，scau就是标签包裹的内容

接收参数

在HelloWorld组件中接收参数
属性：this.props.name 接收；
标签内容：this.props.children 接收；
使用如下：

import React from 'react'

class HelloWorld extends React.Component{
     render(){
     	  //接收参数，这样在引用这个组件的时候就可以对传递来的参数进行处理了
          return <div>hello world {this.props.name} from{this.props.children}</div>; 
     }
}

export default HelloWorld;

ReactJS组件初探

组件