Skip to main content

Class 组件

前言​

在 React 中，定义组件的方式有两种，一个是 class 类组件，一个是函数组件。class 类组件的实现相比于函数组件要复杂。

constructor​

React 组件在创建的时候会调用 constructor() 函数进行数据的初始化，初始化 props 和 state。这里的初始化 state 的语句必须是 this.state = ... 的形式，不能使用 this.setState() 的形式初始化 state。

DEMO​

class Welcome extends React.Component{
  
  /*初始化*/
  constructor(props){
    super(props);
    this.state = {
      n: 0
    }
  }
  
    add(){
        this.setState(state=>{
            return {n: this.state.n+1});
        }//此处的state是传递过来的旧的state对象，返回一个新的对象
                        
    }
  
  render(){
    return (
      <div>
        // 外部数据
        姓名是：{this.props.name}
        年龄为：{this.props.age}
        <div>
            {this.props.children}
        </div>

        n: {this.state.n}
        <button onClick={()=>this.add()}>+1</button>

      </div>
    )
  }
}

props 的作用​

  1. 接收外部的数据 数据只能读不能写，外部数据只能由父组件传递

  2. 接受外部的函数 在恰当的时机调用该函数，该函数也一般是父组件的函数

写 props​

组件的 props 外部数据一般是由其父组件的 state 内部数据传递过去的，因此在组件内不允许修改 props，想要修改必须通知创建该数据的父元素进行修改。

state的赋值​

通常情况下的赋值​

数字，字符串，布尔值，null， undefined

this.state = {
  count: 0,
  title: '',
  success: false
};

this.setState({
  count: 1,
  title: 'React',
  success: true
})

数组类型的赋值​

this.state = {
    books:['活着']
};

this.setState(state => ({
  books: [...state.books, '三体'];
}))

注意不要使用push、pop、shift、unshift等方法修改数组类型的状态，因为这些方法都是在原数组的基础上修改，而concat、slice、splice、filter能返回一个新的数组。

对象类型的赋值​

this.state = {
    owner: { name:'',age:12}
};

this.setState(state => ({
owner: { ...state.owner, name: 'Jason' }
}))

componentDidMount​

首次渲染会执行此钩子

可以在此处发起 AJAX 请求

更新计数器​

constructor(props) {
    super(props);
    this.state = {
        counter: 0,
    };
}

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

链接​

React中setState的用法 React.Component 组件 & Props