React组件的state和props有什么区别？类组件的事件怎么绑定

基本概念与区别

（1）props
props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有 可读性和不变性 ，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。props就是外部传递给组件的属性，在函数组件中，可以直接通过形参props访问，而在class组件中，我们一样能通过this.props访问到外部传递的属性。函数组件通过props访问外部传递属性
（2）state
state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。state就是组件内部定义的私有属性，

class Echo extends React.Component {
  constructor(props) {
    // 参照ES6，extends时，constructor内使用this必须调用super，否则报错
    super(props);
    this.state = { name: "echo" };
  }
  render() {
    return (
      <div>
        我的名字是{this.state.name}，年龄{this.props.age}
      </div>
    );
  }
}
ReactDOM.render(<Echo age="18" />, document.getElementById("root"));

外部传递的age就是props，所以在内部也是通过this.props访问，而内部定义的属性则是通过this.state声明，一个在里一个在外，它们共同构成了组件Echo的数据。

区别：
props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化
props 在组件内部是不可修改的，但 state 在组件内部可以进行修改
state 是多变的、可以修改

类组件的事件怎么绑定

class类中默认函数this是严格模式，如果我们不做绑定，在事件函数传递时会导致this丢失，从而为undefined

class Test extends React.Component {
  state= {
    count: 0,
  };
  handleClick (){
    console.log(this);  //undefined
  }
  render(){
    return <div onClick={this.handleClick }>{this.state.count}</div>;
  }
}

React一共提供了三种为函数绑定this的做法

1.bind绑定 this.handleClick = this.handleClick.bind(this);

class Test extends React.Component {
 constructor(props) {
        super(props);
        this.state = {
            count: 1
        }
        // 在constructor中为方法绑定this
        this.handleClick = this.handleClick.bind(this);
    }
 
  handleClick (){
    console.log(this);
  }
  render() {
    return <div onClick={this.handleClick}>{this.state.count}</div>;
  }
}


class Test extends React.Component {
   state= {
     count: 0,
   };
  handleClick (){
 // 在事件中绑定this
    console.log(this); 
  }
  render() {
    return <div onClick={this.handleClick.bind(this)}>{this.state.count}</div>;
  }
}

2.箭头函数绑定

class Test extends React.Component {
  state = {
    count: 0,
  };
  handle=()=>{
    console.log(this); 
  }
  render(){
    return <div onClick={this.handle}>{this.state.count}</div>;
  }
}

class Test extends React.Component {
  state = {
    count: 0,
  };
  handle(){
    console.log(this); 
  }
  render() {
    return <div onClick={()=>{this.handle}}>{this.state.count}</div>;
  }
}

事件中的e对象传递

1.不需要传递参数

class Test extends React.Component {
  state = {
    count: 0,
  };
  handle=(e)=>{
    console.log(e);  
  }
  render() {
    return <div onClick={this.handle}>{this.state.count}</div>;
  }
}

class Test extends React.Component {
  state = {
    count: 0,
  };
  handle(){
   return (e)=>{
     console.log(e); 
    }  
  }
  render() {
    return <div onClick={this.handle()}>{this.state.count}</div>;
  }
}

2.需要传递参数

class Test extends React.Component {
  state = {
    count: 0,
  };
  handle(num){
    return (e)=>{
      console.log(e,num); 
    }   
  }
  render() {
    return <div onClick={this.handle(1)}>{this.state.count}</div>;
  }
}
class Test extends React.Component {
  state = {
    count: 0,
  };
  handle(e,num){
     console.log(e,num); 
  }
  render() {
    return <div onClick={(e)=>{this.handle(e,1)}}>{this.state.count}</div>;
  }
}