【整活】👉被玩坏的React hook组件通信👈

简介: 【整活】👉被玩坏的React hook组件通信👈

大家好,我是「萌萌哒草头将军」,感兴趣的小伙伴可以关注我公众号「萌萌哒草头将军」,近期有抽奖哦~

今天给大家表演个杂技,有赞的捧个赞场,没赞的捧个人场,可怜可怜我吧!!!

👉useImperativeHandle杂技

语法:useImperativeHandle(ref, createHandle, dependencies?)

用法:

🎉 向父组件暴露一个自定义的 ref 句柄

🎉 暴露你自己的命令式方法

我们采用自定义命令方法的方式进行表演,如下

🎁 父组件改变子组件的值

import { useRef } from 'react';
import Child from './Child.js';
export default function Form() {
  const ref = useRef(null);
  function handleClick() {
    ref.current.buy('apple');
  }
  return (
    <form>
      <Child label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}
import { forwardRef, useImperativeHandle, useState } from 'react';
const Child = forwardRef(function MyInput(props, ref) {
  const [goods, setGoods] = useState(null)
  useImperativeHandle(ref, () => {
    return {
      buy (goods) {
        setGoods(goods)
      },
    };
  }, []);
  return <div>{goods}</div>;
});
export default Child;

👉使用设计模式杂技

在线Demo看这里

这里需要借助之前提到的中介者模式

import { useEffect, useState } from "react";
import { mediator } from "./index";
// 事件订阅器
export const useGetEvent = (topic) => {
    const sub = mediator.install({});
    const [data, setData] = useState(0);
    sub.subscribe(topic, setData);
    return data;
};
// 事件发布器
export const useSetEvent = (topic, value) => {
    const sub = mediator.install({});
    useEffect(() => sub.publish(topic, value), [value]);
    return [];
};
// app
import React, { useState } from "react";
import { Child } from "./child";
import { useSetEvent } from "./useEvent";
const App = () => {
    const [count, setCount] = useState(0);
    useSetEvent("count", count);
    return (
        <div>
            {count}
            <br />
            <button onClick={() => setCount((curr) => curr + 1)}>add +</button>
            <Child />
        </div>
    );
};
// child
import { useEffect } from "react";
import { useGetEvent } from "./useEvent";
export const Child = () => {
    const sub = useGetEvent("count");
    useEffect(() => console.log(sub), [sub]);
    return <div></div>;
};

事实上不止子组件,全局组件可以实现

好了,今天就表演到这了,感谢大家的捧场

相关文章
|
1月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
47 0
|
1月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
20 0
|
1月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
23 0
|
1月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
21 0
|
1月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
19 0
|
26天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
24 0
|
21天前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
9 0
|
23天前
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理
|
26天前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
63 1
|
26天前
|
资源调度 前端开发 JavaScript
React组件
React组件
37 0

相关产品

  • 云迁移中心