【前端】React基础3---React组件2

一、状态state

1.设置了state 的组件称之为有状态组件，没有设置state 的组件称之为无状态组件

2.组件中的数据

 1）class A extends Componnent{

         State ={key:value}

    }

2）class A extends Componnent{

           constructor( ){

              Super( );

              This.state={

                 Key.value

              }

           }

      }

3.在类中 定义 state（只能写这个名字）对象

    State={key.value}

4.不要直接修改 state:this.state.ok=’ok’ 

   使用 setState{key:value}

5.setState 注意：

  在同步逻辑中，异步更新状态与真实dom

  在异步逻辑中，同步更新状态与真实dom

  接受第二个参数，是个回调函数，在这里状态与dom更新完毕

二、属性props（只读）

1.state 是内部属性，props是为了更好的复用性，从外部接受数据

2.某组件

{属性}

<MyNav title={this.title} leftBtn={isShowLeft}/>

3.MyNav.js

1)   

 render(){

      let{title,leftBtn}=this.props;

      return(

         <div>

             {leftBtn&&<button>left</button>}

             <p>{title}</p>

             <button>right</button>

             <img{...obj}/>

         </div>

        )

}

2)

import myprop from 'prop-types'

static propTypes={

       title:myprop.string,

       leftBtn:myprop.bool

}

// 默认属性

static defaultProps={

      title:'首页'

}

4.函数式组件对于属性的应用会更简单一些，直接通过形参可以获得 

三、属性及状态总结

1.属性是父组件对子组件的数据传输与操作

2.状态是组件自己的内部的数据

四、表单

1.受控组件：

       由React控制

       value绑定state中的值

       实现表单元素的change事件

       优化：可以使用name属性，统一完成change事件

       注意：选择框与其他表单元素获取值的方式不一样

2.非受控组件：

 由DOM操作

 在constructor中React.createRef( )

五、通信

1.父传子：属性值

2.子传父：回调函数

3.在父组件中对子组件进行ref标记，可以获取到子组件的引用

4.中间人模式：由父组件充当中间人，利用子传父+父传子模式完成

5.发布订阅者模式

 Let bus={

         List=[ ],

         Subscribe(cb){

            This.list.push(cb);

         },

         //发布者

         Pubish(text){

             This.list.forEach(cb=>cb&&cb(text))

         }

   }

6.context 状态树传参（官方提供）

1)父组件：

<GlobalContext.provider value={{a:1,b:2}}>

           <child1></child1>

           <child2></child2>

</GlobalContext.provider>

2)子组件：

<GlobalContext.Consumer>

     {

      value=>{

        return(

           <div>子组件{value}</div>

       )

     }

   }

</GlobalContext.Consumer>  

注意：value是固定的关键词

7.Redux

六、插槽

1.默认形式

     父组件：

<Child><p>插入任意内容</p></Child>

     子组件：

 return(

            <div>

            <p>子组件内部标签</p>

            {以下内容是插槽内容，外部代码在此进行替代}

            {this.props.childer}

            {固定写法}

            </div>

)

2.按顺序插入：

     父组件：

<Child>

  <p>西游记</p>

  <p>红楼梦</p>

  <p>水浒传</p>

</Child>

   子组件Child：

return(

  <div>

    {this.props.children[0]}

    {this.props.children[1]}

    {this.props.children[2]}

  </div>

)

3.作用：

     1）提高代码的复用性

     2）一定程度上减少父子通信

七、生命周期（钩子函数）

      写在前边：只有类组件（函数组件需要hooks支持）

1.初始化阶段：

componentWillMount: 组件即将挂起，render之前最后一次修改state的机会

         常用于：state的初始化

         备注：如果有警告，可使用UNFAFE_componentWillMount

render: 只能访问props与state,不能修改state及进行dom输出

componentDidMount:

      成功执行完毕render并完成dom节点的渲染，可以对dom修改

      常用于：axios请求，订阅函数调用，计时器，dom操作

2.运行中阶段:

conponentWillReceiveProps(nextProps):

        父组件修改属性触发

        最先获取父组件传来的属性，可以在这里进行axios请求或者其它逻辑处理

        备注：如果有警告，可使用UNSAFE_conponentWillReceiveProps

 shouldComponentUpdata(nextProps,nextState):

             返回false,会阻止render的调用

             参数是 被修改之后新的属性及状态

 componnentWillUpdata:

             组件将要更新，不能修改属性及状态

             备注：如果有警告，可使用UNSAFE_componnentWillUpdata

 render: 只能访问props与state,不能修改state及进行dom输出

 componentDidUpdata(preProps,preState):

              可以修改dom

              参数是 被修改之前的属性及状态

3.销毁阶段：

  componentWillUnmount 在删除组件前进行清理工作

八、新生命周期（推荐）

1.老钩子问题：

  componentWillUnmount 会重复触发多次，如果绑定事件无法绑定

2.static getDervicedStateFromProps(nextProps,nextState):

   将属性转为状态

   挂载之前与更新时会执行

   返回一个状态对象