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