React基础语法笔记

jsx语法：
    1、{}表达js
    2、{/*注释*/}
    3、class改为className
    4、style要使用js对象驼峰式写法

渲染
    文本渲染
        普通字符串：{变量名}
        html字符串：
<标签 dangerouslySetInnerHTML={{ __html: 变量名}}></标签>
    条件渲染
    三元运算符
        {条件？<p>true展示</p>:<p>false展示</p>
    &&
        {条件&&<p>条件成立展示</p>
    循环     
        数组会自动展开{arr}
        数组中可以有html节点
        通过map映射
         {arr.map((item, index) => <p key={index}>{item}</p>)

事件
    1、响应函数,绑定的事件名需用驼峰式写法
        onClick={this.函数名}
        onDoubleClick={()=>{this.函数名()}
    2、事件传参
        onClick={this.show.bind(this,参数)}
        onDoubleClick={()=>{this.函数名(参数)}

state
    使用
        state的数据是响应式更新的（数据变化，视图自动更新）
        {this.state.num}
    更新
        this.setState({num:val})
        this.setState({num:value},()=>{})

组件类型
    函数组件（推荐使用）
    export default App

   特点：
        1.函数名首字母大写
        2.必须有return返回节点
    类组件组建的传参
    父传子：props
    子传父：props+函数
    兄弟：先传给父，再传给子
    跨层级：
props特点
    props可以是值也可以是函数，props只读

    全局：redux

    默认props
        组件名.defaultProps={属性：默认值，属性2：默认值}

组件生命周期
    创建
        static getDerivedStateFromProps(nextProps, prevState)
props更新 nextProps最新的props，prevState之前State 需要返回最新的State
    render 渲染
        componentDidMount 
    组件挂载完毕
作用：操作dom，注册事件，开启定时器setTimeout，interval
    更新
        static getDerivedStateFromProps
        shouldComponentUpdate(nextProps, nextState)
    组件是否需要更新，返回true更新，返回false不更新
    render 渲染
        getSnapshotBeforeUpdate(prevProps, prevState)   
    更新前获取快照，返回的数据，cdu的第三个参数
        componentDidUpdate 
    挂载组件已经更新完毕
    卸载
        componentWillUnmount 
    组件将要卸载
        作用：移除事件监听，停止定时器
    组件优化
        shouldComponentUpdate
pureComponent会自动化       如果props和state没有发生变化则不更新