React 类组件

什么是组件

能和其他物品组合起来的物件就叫做组件，在 Vue 中，一个构造选项就可以表示一个组件，而在React 中一个React元素返回的函数就是组件

创建方式

ES5（过时的）

由于 ES5 不支持 class，才用这种方式

import React from 'react'

const A=React.createClass({
	render(){
    	return (
        	<div>hi</div>
        )
    }
})
export default A

ES6方式（推荐使用）

import React from 'react'

Class B extends React.Component{
	constructor(props){
    	super();
    }
	render(){
    	return (
        	<div>hi</div>
        )
    }
}
export default B

props的使用

1. 接受外部数据，可以直接读取属性 this.props.xxx，不能改写 props ,应该由数据的主人，也就是外部去修改
2. 接受外部函数，可以在恰当的时机调用该函数，该函数一般是父组件的函数

import React from "react";

export default function App() {
  return (
    <div className="App">
      <Son say="我是儿子"/>
    </div>
  );
}

class Son extends React.Component{
  render(){
    return(
      <div>
        {this.props.say}
      </div>
    )
  }
}

state的使用

使用 this.state 读，this.setState 写

import React from "react";

export default function App() {
  return (
    <div className="App">
      <Son/>
    </div>
  );
}

class Son extends React.Component{
  constructor(){
    super();
    this.state={
      n:0
    }
  }
  add(){
    this.setState(state=>{
      return {n:state.n+1}
    })
  }
  render(){
    return(
      <div>
        {this.state.n}
        <button onClick={()=>this.add()}>+1</button>
      </div>
    )
  }
}

setState 注意事项

• this.state.n+=1 无效？并不是，n 的值已经改变，只是 UI 没有更新，要调用 setState 才会触发更新（异步更新）
• setState 会异步更新 UI，所以并不是马上改变，改完马上读取时无法读取成功的，推荐使用 setState 函数，如上面的例子
• this.setState(this.state) 为什么不这样改，因为 React 希望我们不要去修改旧的 state（不可变数据）
• setState 会自动合并第一层属性，但是不会合并第二层，可以使用 Object.assign 或者 ... 操作符

事件绑定

<button onClick={()=>{this.add()}>n+1</button>
// 推荐使用

<button onClick={this.add}>n+1</button>
// 不推荐，该 this.add 里的this会变成 window

<button onClick={this.add.bind(this)}>n+1</button>
// 不推荐，虽然解决了 this 问题，但是太麻烦

<button onClick={this.add}>n+1</button>
// this.add=()=>this.setState({n: this.state.n+1})，这样不如直接声明 add

<button onClick={this.add}>n+1</button>
// add=()=>this.setState({n: this.state.n+1}) 最好的写法

生命周期

生命周期就是一个对象的生老病死。

• constructor() 在这里初始化 state
• shouldComponentUpdate() 是否阻止更新
• render() 创建虚拟 DOM
• componentDidMount() 组件出现在页面
• componentDidUpdate() 组件已更新
• componentWillUnmount() 组件将销毁

详解： 生命周期详解