邂逅react(九)-component组件化开发

今天想分享一下react的核心知识之组件化开发~~
1.关于组件化的理解:组件化就是把一个页面或者复杂的功能拆解成一个个小组件,让这些小组件各自分工有序配合构成我们的页面或复杂的程序.

2.为什么要组件化:传统的页面或程序开发结构相对复杂，尤其是大型应用程序，页面多，代码耦合性强不好维护，如果能把代码拆解成一个个独立的小模块，类似积木一样，每个都有自己的功能那么开发和维护起来就更加省事,复用性更高，拓展性强，每个组件还可以将内部的小功能拆分成更小的组件，开发起来也更加方便灵活。鉴于以上优势很多主流框架都采用了组件化开发的设计思想。

下面简单聊聊react中的组件
一、react中组建的类型：

1.根据定义划分可分为类组件和函数组件
2.根据状态划分可分为有状态组件和无状态组件
3.根据职责可划分为展示组价和容器组件
  当然还有异步组件、高阶组件等

下面简单聊聊类组件和函数组件

export function FunComponent(){//函数组件
  //没有状态state 没有this(组件实例)
  return (
    <div>
      <h1>我是函数组件</h1>
    </div>
  )
}

class App extends Component {//类组件
  constructor(props){
    super(props)
    this.state={}//存储类组件里的数据 这是类组件的状态
  }
  render() { //渲染当前类组件
    return (      
      <div>
         {/*根节点 */}
        <h1>我是类组件</h1>
        <FunComponent/>{/*类组件里面引用函数组件 组件名开头要大写*/}
      </div>
     );
  }
}
 
export default App;

关于类组件的说明:
1.内部可以定义constructor函数 可以做一些数据的初始化
2.内部有state用来进行数据状态的管理
3.有this实例对象

注意:
1*类组件必须继承自react.Component
2*内部必须实现render函数且要有返回值
3*首字母必须大写

关于组件中return的返回值
1.可以是jsx创建的react元素或引用的组件
2.可以是数组或数字或字符串
3.可以是boolean值或null(boolean或null什么都不展示)
4.fragment片段,portals渲染元素到不同子节点

二、组件常用生命周期：
组件生命周期描述的是一个组件从创建到销毁的过程，在某些特定阶段可以做一些事情，回调函数处理一些逻辑
生命周期和生命周期函数
1.mount-->组件第一次在dom树挂载渲染 对应生命周期函数:componentDidMount 组件一挂载就会回调这个生命周期函数
2.unpdate-->组件更新 对应生命周期函数:componentDidUpdate 组件内部一更新就会回调这个函数
3.Unmount-->组件卸载 对应生命周期函数:componentWillUnmount组件将被DOM树移除前回调这个生命周期函数
常用生命周期图解

  注意：
  1.componentDidMount 组件一挂载立马会回调这个函数 
    依赖DOM操作的方法可以在这里调用 
    建议在这里执行一些网络请求方法 
    添加一些订阅方法 在componentWillUnmount时会移除
  2.componentDidUpdate 组件首次渲染不会调用这个生命周期函数
    组件数据更新重新渲染时调用
  3.componentWillUnmount 组件将要移除时回调的生命周期函数
    一般对事件解绑 有定时器会清除定时器
    

今天的分享完毕 感谢阅读