react函数组件和类组件
react函数组件和类组件
函数组件会捕获render内部的差异，性能主要取决于代码正在进行的操作，函数组件和类组件区别可以忽略不计，但是优化策略是有不同的。
类组件
class Welcome extends React.Component {
render() {
return <h1>{this.props.name}</h1>
}
}
类组件使用的时候要实例化
函数组件
function Welcome(props) {
return <h1>{props.name}</h1>
}
函数组件直接执行函数取回结果，所以函数组件的性能要比类组件高
共同点
- 不允许修改自己的props
- 所有的react组件都是纯函数，禁止修改自身的props
- react是单项数据流，父组件改变了属性，所以子组件会更新
- 属性是外部传递进来的，状态state是组件本身的，状态可以在组件中任意的修改，组件的属性和状态变化都会发生视图更新。
React.createElemenet
- 传入一个字符串’div’,则会创建要给div
- 传入一个函数，则会调用该函数，获得返回值
- 传入一个类，会在类前面加上new，执行构造函数constructor，获取组件对象，然后调用组件的render方法
props和state
类组件
this.props.xxx
state => 读取 this.state 写入this.setState
- setstate之后，state不会马上改变，立马读取state会失败，要使用setState函数
- this.setState(this.state)不推荐，会修改旧的state。
this.state = {
n: 0,
m: 0,
user: {
name: 'frank',
age: 18
}
}
user.name修改，n和m会自动合并，但是age不会合并，会变成空
changeUser() {
const user = Object.assgin({}, this.state.user)
user.name = "jack";
this.setState({
user: user
})
}
changeUser() {
this.setState({
user: {
...this.state.user,
name: 'jack'
}
})
不能直接修改state，组件不会宠幸触发render，只有调用setstate才会触发ui更新。react不是数据像饮食，不能监听到数据变化就触发试图更新
setState是异步更新ui，setstate是异步指定的，要把修改的状态放到一个队列中，react才会真正进行优化的执行时机
函数组件
- useState返回数据，第一项读，第二项写
函数组件不会自动合并，需要使用...操作符来进行合并
const Grandson = () => {
const [state, setState] = React.useState({
n: 0,
m: 0
});
return (
<div className="Grandson">
孙子 n:{state.n}
<button onClick={() => setState({...state, n: state.n + 1 })}>n+1</button>
m:{state.m}
<button onClick={() => setState({...state, m:state.m + 1})</button>>
</div>
);
};
事件绑定
<button onClick={() => this.addN()}>n+1</button>
this._addN = () => this.addN()
<button onClick={this._addN}>n+1</button>
// this的指向问题，可能会指向全局的window