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