React类组件以及组件中props 和 state属性说明

类式组件

• 组件类必须继承 React.Component
• 组件类必须有 render 方法，在render的return中定义要输出的内容

下面是一个简单的小例子：

设置入口文件index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./app" //引入组件

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);

组件文件 app.js：

import React, {
     Component} from 'react'
import "./index.css"
import Dl from "./dl"
// import data from "./data"
let data = {
     
    react: {
     
        title: 'react知识点',
        list: [
            {
     name: 'JSX'},
            {
     name: 'babel'}
        ]
    },
    expression: {
     
        title: '插值表达式',
        list: [
            {
     name: '变量'},
            {
     name: '算术运算'},
            {
     name: '函数调用'}
        ]
    },
    type: {
     
        title: '组件类别',
        list: [
            {
     name: '类组件'},
            {
     name: '函数组件'}
        ]
    }
};

export default class App extends Component
{
     
    state = {
     
        showName:'react' //当前显示的栏目
    }
    //修改显示状态事件 通过props给子组件传递下去 子组件通过事件调用changShow属性来达到修改父组件数据的目的
    changShow =(showName)=>{
     
        this.setState({
     
            showName
        })
    };

    render()
    {
     
        let {
     showName} = this.state;
        return (
            <div className="friend-list">
                {
     
                    Object.keys(data).map((itemName,index)=>{
     
                        return  <Dl key={
     index} name={
     itemName} showName={
     showName} changShow={
     this.changShow} data={
     data[itemName]}/>
                    })
                }
            </div>
        )
    }
}

创建 Dl组件文件 dl.js

import React,{
     Component} from 'react'

export default class Dl extends Component{
     
    render(){
     
        let {
     data,changShow,name,showName} = this.props;
        return(
            <dl className={
     `friend-group ${
        showName === name  ? 'expanded' :''}`}>
                <dt onClick={
     ()=>{
     
                	//子组件通过事件调用changShow(name)属性来达到修改父组件数据的目的 如果当前状态为显示再点击关闭
                    changShow(showName === name ? '' : name)
                }}>{
     data.title}</dt>
                {
     
                    data.list.map((item,index)=>{
     
                        return  <dd key={
     index}>{
     item.name}</dd>
                    })
                }
            </dl>
        )
    }
}

最后附上index.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;
}

---

以上是一个类组件的案例，最后补充一些属性说明：

props 和 state

• props 父组件传递过来的参数
• state 组件自身状态
• setState

同一时间段内，多次调用setState，会自动进行数据合并，再统一render（渲染视图）
状态： 组件的state属性 用来记录组件中一些会变化的数据 组件的 setState({});方法 调用 setState 修改 state 中的数据，修改完之后，会自动帮助我们更新视图

props 与 state 的区别

1、 state 的主要作用是用于组件保存、控制、修改自己的可变状态，在组件内部进行初始化，也可以在组件内部（render内部）进行修改，但是组件外部不能修改组件的 state
2、props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改
state 和 props 都可以决定组件的外观和显示状态。

通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state

组件通信与数据流

在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

• 父级向子级通信
• 子级向父级通信

React 中的事件

1. 事件本身大小写问题 首字母小写 驼峰法命名 如点击事件：onClick
2. React 的事件处理函数，默认情况 this 是一个 undefined，需要处理this
   处理this方法：
   1、通过constructor绑定

constructor(props){
     
	super(props);
	this.clickHandle = this.clickHandle.bind();//把this绑定
}

2、使用剪头函数，如：

 onChangeShow = ()=>{
     
        let {
     isShow} = this.state;
        this.setState({
     
            isShow: !isShow
        })
}