react组件

1. react组件结构

1.1 函数式组件

通过ES5的构造函数定义的组件，不能定义state状态数据，只用于模板展示，也叫 无状态组件

function MyCom1(){
  // 在函数式组件中，使用return返回组件模板
  return <div>这是函数式组件的组件模板</div>
}

• 在函数式组件中使用return返回组件模板

通过 ReactDOM.rebder() 将组件模板渲染到视图上:

ReactDOM.render(
  <div>
    <MyCom1/> <MyCom2/>
  </div>,
  document.getElementById('example')
)

1.2 类组件

通过ES6的class类 定义的组件，可以定义state状态函数，同源数据逻辑交互，也叫 有状态组件

class MyCom2 extends React.Component{
  // 类组件的模板需要通过render函数return出去，不写return或renturn为空都会报错
  render(){
    return <div>这是类组件的组件模板</div>
  }
}

• 类组件的模板需要通过render() 函数return出去
• 不写return 或 return为空 都会报错

2. react组件状态

由于函数式组件是无状态的，所以不考虑其组件状态，只有类组件可以定义 组件状态state

2.1 类组件中状态数据state的定义（两种方式）

2.1.1在组件中直接定义赋值 state = {}

组件状态state可以直接在类中 用等号 定义赋值

state = {   
    name: "张三",
    age: "15",
    sex: "男"
}

2.1.2在组件构造器中使用this定义赋值 this.state = {}

constructor(){
    super()  // 必选，目的是调用父类构造器，用于继承
    console.log(this);  // 指向当前组件，会默认执行
    // this.state = {
    //   age: 10
    // }
}

• constructor是类的构造器，也是组件的初始化钩子函数，类似于vue组件的 created 钩子
• state状态数据也可以在构造器中定义，但它会把组件中直接定义的state覆盖掉

2.2 this指向当前组件的四种方式

组件的自定义函数在组件中直接写即可（后面不用加逗号）

nameChange1(){
    console.log(1,this);  // undefined
    // 组件中的函数，默认this为undefined，不是当前组件
  }

组件中的函数，默认this为undefined，使this指向当前组件的四种方式如下：

2.2.1定义函数时使用箭头函数定义 add = ()=>{}

 nameChange2 = (e)=>{
    console.log(2,this);  // 当前组件
    this.setState({age: e.target.value})
  }

2.2.2在模板中调用函数时使用bind修改this，如：{this.add.bind(this)}

• 在模板中调用state和函数都需要this打点调用

<input value={this.state.sex} onChange={this.nameChange3.bind(this)} />

组件绑定的自定义函数：

nameChange3(e){
    console.log(3,this);  // 当前组件
    this.setState({sex: e.target.value})
  }