一、react基础语法

模板语法

1.文本

1. 普通： {文本内容}
2. html文本：<div dangerouslySetInnerHTML=={{__html:html文本内容}}>

2.条件渲染

1. {flag&&<h1>为true显示</h1>}
2. {flag?'true显示':'false不显示'}

3.列表渲染：

       {list.map(item=><h3 key={item}>{item}</h3>)}

二、组件传参

1.父传子 props

1.     父组件传递  <Steper  num={5}>
2.     子组件接收 props.num

2.默认参

Steper.defaultProps = {
    num:1
}

3.子传父,执行父组件的传递过来的props回调函数；子传父:执行回调函数

4.子传父 

1.父组件，定义函数并把函数传递给子组件

updateSize = (n)=>this.setState({size:n})
<Steper updateSize={this.updateSize}>

2.子组件

执行props.updateSize()
相当于执行父组件的updateSize方法

三、生命周期

主要的三个阶段

//创建阶段（挂载阶段） componentDidMount

一、挂载阶段

1.constructor 构造函数  

2.static getDerivedStateFromProps

3.render 渲染函数

4.componentDidMount 组件已经挂载

二、更新阶段

1.static getDerivedStateFromProps

2.shouldCompoentUpdate 组件是否更新(返回true才更新)

3.render 渲染

4.getSnapshotBeforeUpdate 更新前获取快照（返回值是componentDidUpdate第三个参数）

5.componentDidUpdate 组件已经更新

三、卸载阶段

componentWillUnmount 卸载