React基本使用-类式组件

最新推荐文章于 2024-08-03 21:44:22 发布

此鱼非闲鱼也

最新推荐文章于 2024-08-03 21:44:22 发布

阅读量2.1k

点赞数 1

分类专栏： React 文章标签： react React类式组件

本文链接：https://blog.csdn.net/m0_45315697/article/details/107046335

版权

本文介绍了React类式组件的基本使用，包括组件命名规范、组件类的必要条件及执行流程。通过一个类似QQ好友列表的案例，展示了如何创建类式组件，以及如何进行优化，包括提取可变数据到独立文件、动态渲染数据和处理保留字问题。优化后的组件提高了复用性和数据操作便捷性。

摘要由CSDN通过智能技术生成

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