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'));