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

相关推荐
兜小糖的小秃毛几秒前
两段文本比对,高亮出差异部分
linux·前端·javascript
佛系菜狗9 分钟前
element-ui、element-plus表单resetFields()无效的坑
前端·javascript·vue.js
爱的叹息30 分钟前
【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
前端·网络·网络协议·http
遗憾随她而去.37 分钟前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议
老兵发新帖1 小时前
pnpm常见报错解决办法
前端
Sonetto19991 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin1 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快2 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛2 小时前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼2 小时前
React.memo 和 useMemo
前端·javascript·react.js