本小将讲述在 React 中，
1、通过函数 function 方式创建组件并分离成单独的组件实现，然后传递参数给组件使用
2、通过 关键字 class 来创建组件，并分离成单独的组件实现，然后传递参数给组件使用以及创建私有属性使用
1 React中创建组件方式一 function
1.1 创建组件并在浏览器中渲染效果
//第一步 导入依赖
//这两个导入进，接收的成员变量名称必须这样写
//用来创建组件、虚拟DOM元素 生命周期
import React from 'react';
//所创建好的组件和虚拟DOM放到页面上展示
import ReactDOM from 'react-dom';
//创建组合的第一种方式
function HelloWorld() {
//在组件中 return 一个null 则表示此组件是空的 什么都不会渲染
return null;
}
const rootDiv = <div>
这里是创建组件的第一种方式
<hr/>
<HelloWorld/>
</div>;
//第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
// 参数一 要渲染的虚拟DOM元素
// 参数二 指定页面上的容器
ReactDOM.render(rootDiv, document.getElementById('app'));
运行在浏览器中
在这里插入图片描述
在这里我们创建了一个 HelloWorld 组件，在组件中返回了null ,所以在浏览器中什么这个组件什么也没有渲染。
//创建组合的第一种方式
function HelloWorld() {
//在组件中 return 一个null 则表示此组件是空的 什么都不会渲染
// return null;
//在这里必须返回一个合法的 JSX 虚拟 DOM 元素
return <div>这里是 HelloWorld 组件 </div>
}
然后运行在浏览器中的效果
在这里插入图片描述
1.2 为组件传递数据
//第一步 导入依赖
//这两个导入进，接收的成员变量名称必须这样写
//用来创建组件、虚拟DOM元素 生命周期
import React from 'react';
//所创建好的组件和虚拟DOM放到页面上展示
import ReactDOM from 'react-dom';
//创建组合的第一种方式
//传入参数
function HelloWorld(props) {
//在组件中 return 一个null 则表示此组件是空的 什么都不会渲染
// return null;
//在这里必须返回一个合法的 JSX 虚拟 DOM 元素
//在这里需要注意的是 形参 props 的值永远是只读的，不可以重新被赋值
return <div>这里是 HelloWorld 组件 传入参数 name : {props.name} age :{props.age}</div>;
}
const people = {
name: '张三',
age: 29
};
const rootDiv = <div>
这里是创建组件的第一种方式
<hr/>
{/*使用组件并传入参数*/}
<HelloWorld name={people.name} age={people.age}/>
</div>;
//第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
// 参数一 要渲染的虚拟DOM元素
// 参数二 指定页面上的容器
ReactDOM.render(rootDiv, document.getElementById('app'));
在这里插入图片描述
在传递参数的时候，我们可以注意一下
const rootDiv = <div>
这里是创建组件的第一种方式
<hr/>
{/*使用组件并传入参数 这里是将所有的属性分别写出来*/}
<HelloWorld name={people.name} age={people.age}/>
<hr/>
{/*使用组件并传入参数 如果属性比较多，不逐一写出来时，可以这样传参数*/}
{/* ... 个点代表展开 es6语法*/}
<HelloWorld {...people}/>
</div>;
1.3 将编写的 HelloWorld 组件抽离
在src目录下创建components 文件夹，创建 HelloWorld.jsx文件
//创建组合的第一种方式
//传入参数
import React from 'react';
function HelloWorld(props) {
//在组件中 return 一个null 则表示此组件是空的 什么都不会渲染
// return null;
//在这里必须返回一个合法的 JSX 虚拟 DOM 元素
//在这里需要注意的是 形参 props 的值永远是只读的，不可以重新被赋值
return <div>这里是 HelloWorld 组件 传入参数 name : {props.name} age :{props.age}</div>;
}
//把组件暴露出去
export default HelloWorld
或者写成
//创建组合的第一种方式
//传入参数
import React from 'react';
export function HelloWorld(props) {
//在组件中 return 一个null 则表示此组件是空的 什么都不会渲染
// return null;
//在这里必须返回一个合法的 JSX 虚拟 DOM 元素
//在这里需要注意的是 形参 props 的值永远是只读的，不可以重新被赋值
return <div>这里是 HelloWorld 组件 传入参数 name : {props.name} age :{props.age}</div>;
}
然后在 index.js 中使用的时候导入
//导入HelloWorld组件
//默认，如果不做单独配置的话，不能省略 .jsx 后缀名
import HelloWorld from './components/HelloWorld.jsx'
如果要省略后缀名，需要在webpack.config.js 配置文件中
在这里插入图片描述
配置好后重新运行项目，在导入组件时就可以写成
//导入HelloWorld组件
//默认，如果不做单独配置的话，不能省略 .jsx 后缀名
//配置好resolve 后，可以不写.jsx后缀名，程序自动补全
import HelloWorld from './components/HelloWorld'
然后在这里我们可以使用别名来表示路径
//导入HelloWorld组件
//默认，如果不做单独配置的话，不能省略 .jsx 后缀名
// 这里使用到的@ 表示项目根目录中的 src 这一层
import HelloWorld from '@/components/HelloWorld.jsx'
这里使用到了 @ 符号，那么在 webpack.config.js 中进行配置
在这里插入图片描述
2 React中使用class创建组件方式
ES6 中 class 关键字是实现面向对象的
//创建组合的第二种方式
//传入参数
import React from 'react';
export default class ClassHelloWorld extends React.Component {
//在组件中必须有 render函数 用来渲染 DOM结构
render() {
return (
<div>
这里是使用class关键字创建的组件
</div>
);
}
}
在这里插入图片描述
然后在index.js中使用时，先导入
//第一步 导入依赖
//这两个导入进，接收的成员变量名称必须这样写
//用来创建组件、虚拟DOM元素 生命周期
import React from 'react';
//所创建好的组件和虚拟DOM放到页面上展示
import ReactDOM from 'react-dom';
//导入HelloWorld组件
//默认，如果不做单独配置的话，不能省略 .jsx 后缀名
// 这里使用到的@ 表示项目根目录中的 src 这一层
import HelloWorld from '@/components/HelloWorld';
//这里是使用 class 创建的组件
import ClassHelloWorld from '@/components/ClassHelloWorld';
//这里j 模拟数据
const people = {
name: '张三',
age: 29
};
const rootDiv = <div>
这里是创建组件的第一种方式
<hr/>
{/*使用组件并传入参数 这里是将所有的属性分别写出来*/}
<HelloWorld name={people.name} age={people.age}/>
<hr/>
{/*使用组件并传入参数 如果属性比较多，不逐一写出来时，可以这样传参数*/}
{/* ... 个点代表展开 es6语法*/}
<HelloWorld {...people}/>
<hr/>
这里是创建组件的第二种方式
<hr/>
{/*使用组件*/}
<ClassHelloWorld/>
</div>;
//第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
// 参数一 要渲染的虚拟DOM元素
// 参数二 指定页面上的容器
ReactDOM.render(rootDiv, document.getElementById('app'));
2.2 向 class 方式创建的组件中传入参数
<ClassHelloWorld {...people}/>
在 ClassHelloWorld 组件中通过 props 关键字使用传入的参数
//创建组合的第二种方式
//传入参数
import React from 'react';
export default class ClassHelloWorld extends React.Component {
//在组件中必须有 render函数 用来渲染 DOM结构
render() {
return (
<div>
这里是使用class关键字创建的组件
<p> 传递的参数 name:{this.props.name} age:{this.props.age}</p>
</div>
);
}
}
浏览器中效果
在这里插入图片描述
在 class 组件中，可通过 this.state 来定义使用组件私有属性数据
//创建组合的第二种方式
//传入参数
import React from 'react';
export default class ClassHelloWorld extends React.Component {
//在构建函数中
//初始化私有数据
constructor(){
super()
this.state={
city:"中国山西太原"
}
}
//在组件中必须有 render函数 用来渲染 DOM结构
render() {
return (
<div>
这里是使用class关键字创建的组件
{/*这里通过 this.props 来调用外部传递过来的参数*/}
<p> 传递的参数 name:{this.props.name} age:{this.props.age}</p>
{/*然后在这里通过 this.state 来调用私有数据*/}
<p> 这里是组件内的私有属性{this.state.city}</p>
</div>
);
}
}
3 React中function 与class 两种创建方式的对比
- 使用class 关键字创建的组件，有自己的私有数据和生命周期，使用function 创建的组件，只有props，没有自己私有数据和生命周期
- 用 function 创建出来的组件中做 无状态组件，用class关键字创建出来的组件 叫做有状态组件
4 组件中 props 与state/data 的区别
4.1 区别一
- props 中的数据都是外界传递过来的
- state / data 中的数据 都是组件私有的
4.2 区别二
- props 中的数据都是只读的，不能重新赋值
- state/data 中的数据是可读可写的
5 列表实例
//第一步 导入依赖
//这两个导入进，接收的成员变量名称必须这样写
//用来创建组件、虚拟DOM元素 生命周期
import React from 'react';
//所创建好的组件和虚拟DOM放到页面上展示
import ReactDOM from 'react-dom';
//父组件
class CourseList extends React.Component {
constructor(props) {
super(props);
this.state = {
courseList: [
{id: 1, userNmae: '张三', courseName: '语文'},
{id: 2, userNmae: '张三2', courseName: '语文2'},
{id: 3, userNmae: '张三3', courseName: '语文3'}
]
};
}
render() {
return (
<div>
<h1>课程统计列表</h1>
{/*这里通过map 来构建*/}
{this.state.courseList.map(item => <CourseItem {...item}/>)}
</div>
);
}
}
//列表中条目的组件
class CourseItem extends React.Component {
render() {
return (
<div key={this.props.id}>
<h2>姓名：{this.props.userNmae}</h2>
<p>课程内容： {this.props.courseName}</p>
</div>
);
}
}
//第三步 使用ReactDOM 把虚拟DOM 渲染到页面上
// 参数一 要渲染的虚拟DOM元素
// 参数二 指定页面上的容器
ReactDOM.render(<CourseList/>, document.getElementById('app'));
在这里插入图片描述
完毕
