react

1.父子通信

React中是单向数据流,数据只能从父组件通过属性的方式传给其子组件

父传子:props

子传父:子组件通过调用父组件传递到子组件的方法向父组件传递消息的。

2.封装公共组件

首先react公共组件的实现与原生js实现函数基本一致,接受形参,处理数据,返回or不返回一个结果。在不同场景调用组件时,可以通过props属性,传递状态与方法,如果是展示型组件,传入不同样式对象(形参),就可以在不同场景使用多样化展示ui。

3.父组件调用子组件方法

refs

javascript 复制代码
// ChildComponent.js
class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Child method called');
  };

  render() {
    return <button onClick={this.doSomething}>Call Child Method</button>;
  }
}

// ParentComponent.js
class ParentComponent extends React.Component {
  callChildMethod = ref => {
    if (ref) {
      ref.current.doSomething();
    }
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.callChildMethod} />
      </div>
    );
  }
}

4.生命周期

componentDidMount: 该方法在组件挂载后立即调用(即插入到DOM树中)。通常用于执行初始设置,例如从API获取数据或设置事件监听器。

componentDidUpdate: 该方法在更新发生后立即调用。每当组件的props或state发生变化时都会触发它。通常用于基于更新后的状态或props执行操作,例如进行额外的API调用。

componentWillUnmount: 该方法在组件即将卸载和销毁之前立即调用。通常用于执行清理操作,例如移除事件监听器或取消任何正在进行的任务

相关推荐
Json20113153 分钟前
Gin、Echo 和 Beego三个 Go 语言 Web 框架的核心区别及各自的优缺点分析,结合其设计目标、功能特性与适用场景
前端·golang·gin·beego
阿里云云原生8 分钟前
仅3步!即刻拥有 QwQ-32B,性能比肩全球最强开源模型
前端·云原生
清灵xmf34 分钟前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
一棵树长得超出它自己36 分钟前
jmeter if控制器在loop控制器执行结束后执行
前端·jmeter
web_Hsir38 分钟前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
阳树阳树2 小时前
signal-新的状态管理模式
前端·javascript
fakaifa2 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
爱摄影的程序猿2 小时前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
木木黄木木2 小时前
HTML5手写签名板项目实战教程
前端·html·html5
姑苏洛言3 小时前
基于微信小程序实现幸运大转盘页面
前端