乐趣区

邂逅react九component组件化开发

jiezi

今天想分享一下 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 组件将要移除时回调的生命周期函数
    一般对事件解绑 有定时器会清除定时器

今天的分享完毕 感谢阅读

退出移动版