React基础篇（四）之创建组件方式分析

本小将讲述在 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'));

完毕

React基础篇（四）之创建组件方式分析相关推荐

Vue实战篇四：创建多步骤表单
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
【Youtobe trydjango】Django2.2教程和React实战系列四【创建Django应用】
[Youtobe trydjango]Django2.2教程和React实战系列四[创建Django应用] 1. 创建应用 2. 修改应用 1. 创建应用打开cmd黑框,也可以用下列方法打开项目根目 ...
React基础篇（五）css样式的使用
本小节主要讲述在 React中使用css scss 以及其他第三方如bootstrap的css样式配置 1 前言在 JSX 中,如果需要写行内样式,不能为 style 设置字符串的值,而是应该写成 ...
React基础篇（三）之 webpack打包项目配制
1.本篇章配置一个 webpack 打包项目 2.简述 jsx 语法配置支持 1 初始化项目使用 IDE 打开目录在命令行中初化化项目 npm init -y 然后安装 webpack cnpm ...
React基础篇（二）之点击button修改属性值
本篇将实现点击一个按钮动态修改数据上一篇 React 项目的初始化创建 1 index.html 中 <!DOCTYPE html> <html lang="en&quo ...
Vue2基础篇-21-非单文件组件
1. 基本使用 <!DOCTYPE html> <html><head><meta charset="UTF-8"><titl ...
kafka基础篇(四)——kafka消费者客户端
一.入门程序先上代码,从代码入手,讲解kafka消费者客户端的细节. public class HelloKafkaConsumer {public static void main(String[ ...
【GIT 基础篇二】创建版本库与提交
最近在项目过程中,着实是犯懒了,虽然公司使用git管理,但是感觉自己已经严重的依赖页面工具了,这次正好借助公司不是很忙,把git常用的命令整理记录一下,今天我们主要就是整理创建仓库以及修改提交功能. ...
vue从入门到精通之基础篇（二）组件
(1).局部组件的使用渲染组件-父使用子组件 1: 创建子组件(对象) var Header = { template:'模板' , data是一个函数,methods:功能,component ...