React基本使用-类式组件

React组件的使用

React组件分类

  • 函数式组件
  • 类式组件

React自定义组件命名

  • 原生 html元素名称以小写字母开头,符合驼峰命名法规范,比如hello、myComponent。
  • 自定义的 React 类名以大写字母开头,比如 HelloWorld不能写成 helloWorld。
  • React组件类只能包含一个顶层标签。

React类式组件使用的必要条件

  • 组件类必须继承React.Component类
  • 必须要有render方法
  • render方法的return返回的就是组件的内容

类式组件,执行ReactDOM.render函数的原理:

  • 首先找到组件对应的类,并new了这个类的一个实例
  • 通过实例找到原型上的render函数并执行
  • ReactDOM.render接收到原型上render函数retrun返回的虚拟dom
  • 将虚拟dom转换成真实dom,并插入到页面中

小试牛刀:

// 导入react,继承React.Component类两种写法
//(1)
// import React from 'react';
// export default class Hello extends React.Component {
//  render(){
//     return (<div>我就是组件的内容</div>);
//  }
//}

//(2)
import React,{Component} from 'react';
export default class Hello extends Component {
  render(){
     return (<div>我就是组件的内容</div>);
  }
}

来看一个小案例学习一下类式组件的运用!
类似QQ好友列表的示例

FirstList.css:

.friend-list {
    border: 1px solid #000000;
    width: 200px;
}
.friend-group dt {
    padding: 10px;
    background-color: rgb(64, 158, 255);
    font-weight: bold;
}
.friend-group dd {
    padding: 10px;
    /* display: none; */
}
.friend-group.expanded dd {
    display: block;
}
.friend-group dd.checked {
    background: green;
}

FriendList.js:

import React, { Component } from 'react';
import './FriendList.css';//导入样式

export default class FriendList extends Component {
    render() {
        return (
             <div className="friend-list">
                 <div className="friend-group">
                     <dt>家人</dt>
                     <dd>爸爸</dd>
                     <dd>妈妈</dd>
                 </div>
                 <div className="friend-group">
                     <dt>好友</dt>
                     <dd>汤姆</dd>
                     <dd>约翰</dd>
                     <dd>小李子</dd>
                 </div>
                 <div className="friend-group">
                     <dt>客户</dt>
                     <dd>阿里</dd>
                     <dd>谷歌</dd>
                     <dd>百度</dd>
                 </div>
             </div>
        );
    }
}

效果如下:
React自定义类式组件小案例效果
上例中,可以看到,其实它还有需要优化的地方:

  • render方法中return返回的自定义组件内容挺多,页面结构庞大,不清晰,不利于阅读;
  • 页面上数据是静态数据,无法动态展示,不利于后续数据添加或修改等操作

优化如下:
(1)为了提高组件的复用性,先把组件中的一些可变的数据提取出来。
这里数据的格式是以对象保存的,也可以是数组的形式。

新建文件data.js保存所需要的数据

let datas = {
    family: {
        title: '家人',
        list: [
            { name: '爸爸' },
            { name: '妈妈' },
            { name: '姐姐' }
        ]
    },
    friend: {
        title: '好友',
        list: [
            { name: '小马哥' },
            { name: '约翰' },
            { name: '小李子' }
        ]
    },
    customer: {
        title: '客户',
        list: [
            { name: '阿里' },
            { name: '谷歌' },
            { name: '百度' },
            { name: '腾讯' }
        ]
    }
};
export default datas;

(2)因为页面结构是div分组,而各分组下是自定义列表的具体内容,
因此,将页面拆分开,分组和列表分别使用循环遍历元素动态渲染数据到页面上。
FriendList.js如下:

import React, { Component } from 'react';
import './FriendList.css';//导入样式
import data from './data';//导入数据(data已经是一个模块,可以不用带后缀.js)
import Dl from './dl';//导入列表

export default class FriendList extends Component {
    render() {
        return (      
            // 根据数据的数量,循环创建分组(第一层循环)-分组组件
            <div className="friend-list">
                {
                    // Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,
                    // 数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
                    // Object.keys(obj)要返回其枚举自身属性的对象。
                    Object.keys(data).map((item,index) => {
                        return (
                            <Dl
                                key = {index}
                                // 属性名
                                name={item}
                                // 属性值
                                value={data[item]}
                            />
                        );
                    })
                }
            </div>
        );
    }
}

(3)需要新建一个dl.js文件

import React, { Component } from 'react';
export default class Dl extends Component {
    render() {
        // 子组件通过 props 来获取父组件传过来的数据
        let { title, list } = this.props.value;

        return (
            // 根据分组时获取的数据,分组中的列表具体内容(第二层循环)-列表组件
            <div className="friend-group">
                {/* 原静态列表 */}
                {/* <dt>同学</dt>
                <dd>小张</dd>
                <dd>小赵</dd>
                <dd>小王</dd> */}
                
                {/* 动态列表 */}
                <dt>{title}</dt>
                {
                    /* 不建议使用index作为组件key值,这里不给key值,对页面没有影响,
                       而控制台总是报警飘红,缺少"key",这里使用index暂时顶一下*/
                    list.map((item,index) => {
                        return <dd key={index}>{item.name}</dd>
                    })
                }
            </div>
        );
    }
}

(4)App.js

import React, { Component } from 'react';
import FriendList from './FriendList.js';

class App extends Component {
    render() {
        return (<div><FriendList/></div>);       
    }
}
export default App;

优化修改后运行结果如下:
优化后的react好友列表小案例
如图,优化后,实现效果与原来一样,而数据更便于添加、修改等操作。

注意:

  • 我们需要向组件传递参数,可以使用 this.props 对象;
  • 在添加属性时, class 属性需要写成 className ,因为class是JavaScript的保留字。
  • Object.keys(obj) 会返回其枚举自身属性的对象。
展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值