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