react（三）类组件与this处理

• 在react中会把视图拆分成若干的组件，分为两种：
  • 类组件
  • 函数组件

类组件

• 使用类组件时，必须继承自 React.Components
• 类组件必须有一个render方法，在render的return 中定义该组件要渲染的试图
• 组件的视图更新：state 状态
• setState() 更新组件状态
  • 通过 setState 更新状态，会引起组件更新（视图）
• 类组件封装过程
  • 1.建立静态视图
  • 2.拆分组件
  • 3.关联数据
  • 4.处理状态
• 子组件

import React from "react"
// 子组件中有一个属性叫做props
class List extends React.Component {
    state = {
        show: false
    };
    render() {
        console.log(this.props)
        let {data} = this.props;
        let {name,children} = data;
        let {show} = this.state
        return <li className={show?"subList-show":""}>
            <a onClick={()=>{
                this.setState({
                    show:!show
                })
            }}> {name} </a>
            <ul className="subList">
                {children.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })}
            </ul>
        </li>
    }
}
export default List;

• 父组件

import React from "react"
import "./index.css";
import List from "./list";
import data from "./data"

class App extends React.Component {
  render() {
    return <ul id="menu">
      {data.map((item,index)=>{
       // console.log(item)
        return <List 
          key={index} 
          data={item}
          index={index}
        />
      })}
      
    </ul>
  }
}
export default App;

事件

• 注意事件名是小驼峰
• 事件处理的函数的this默认是undefined，通过以下两种方式处理this
  • 箭头函数
  • this绑定

通过箭头函数处理this

class App extends React.Component{
   state = {
     count:1
   }
   handleClick=()=>{
     console.log(this);
   }
  render(){
     // return <div>这是内容</div>
     let { count } = this.state
     return <div>
       <p>{count}</p>
       {/* <button onClick={()=>{
         console.log(this)
       }}>递增</button> */}
       <button onClick={this.handleClick}>递增</button>
     </div>
  }
}

通过this绑定处理

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      count:1
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick=()=>{
    console.log(this);
  }
  render(){
    // return <div>这是内容</div>
    let { count } = this.state
    return <div>
      <p>{count}</p>
      {/* <button onClick={()=>{
        console.log(this)
      }}>递增</button> */}
      <button onClick={this.handleClick}>递增</button>
    </div>
  }
}