Vue基础速成React（二）

遇见

welcome，今天终于有空写第二期，直接直入主题。这一期想分享一下组件传值问题

传值Compare

在vue中我们通常使用v-bind的方式传值，在子组件通过definePorps 接收他，使用$attrs用于接收动态props,在react中也同理,例子如下

// ./App.tsx

import Child from "./component/child";

export default function App() {
  return (
    <div className="App">
      <h1>React PlayGround</h1>
      <Child name={"我是子组件的name"} />
    </div>
  );
}

// ./component/child.tsx

export type ChildProps = {
  name: string;
};

const Child = ({ name }: ChildProps) => {
  return <div>{name}</div>;
};

export default Child;

我们可以看到父组件向子组件传值,只需要使用key={value}的方式即可,接收只需要在子组件的函数参数上获取porps即可

小结

	Vue	React
传递	v-bind="{key:value, ...}"  或者 :key="vlaue"	key={vlaue}
接收	defineProps 或者 $attrs	(props) => {}  函数参数接收

子组件通知父组件Compare

在vue中我们会定义子组件事件去向父组件暴露事件,从而将参数放置在事件回调函数中,父组件通过触发事件接收讯息;在react中我们可以向子组件传递callback,当子组件需要出发某些函数的时候,将callback放置在函数内即可

// .App.tsx

import Child from "./component/child";
export default function App() {
  const onInputEvent = (log: string) => {
    console.log(log);
  };
  return (
    <div className="App">
      <h1>React PlayGround</h1>
      <Child name={"我是子组件的name"} onInputEvent={onInputEvent} />
    </div>
  );
}

// ./component/child.tsx

export type ChildProps = {
  name: string;
  onInputEvent?: (log: string) => void;
};

const Child = ({ name, onInputEvent }: ChildProps) => {
  const inputEvent = (event: React.FormEvent<HTMLInputElement>) => {
    console.log(event);
    onInputEvent &&
      onInputEvent(`input 时向父组件传递的讯息${event.target.value}`);
  };
  return (
    <>
      <div>{name}</div>
      <input onInput={inputEvent} />
    </>
  );
};

export default Child;

关于子组件向父组件传值React更加优雅合理

小结

	Vue	React
子组件	defineEmit(['evnetName'])('eventName',props)	接收Props中的callback,放置在需要触发的位置
父组件	@eventName="function"	callbackName={callback}

多级传值Compare

关于多级传值我们除了使用状态管理(store)之外,在vue中我们可以使用inject & provide函数进行提供注入,在react中我们使用createContext 和 useContext 来实现类似效果

// ./context.tsx

import { createContext } from "react";

const Context = createContext<string>("");

export default Context;

// .App.tsx

import Child from "./component/child";
import Context from "./context";

export default function App() {
  return (
    <div className="App">
      <h1>React PlayGround</h1>
      <Context.Provider value={"我是Provider"}>
        <Child />
      </Context.Provider>
    </div>
  );
}

// ./component/child.tsx

import { useContext } from "react";
import Context from "../context";
const Child = () => {
  const value = useContext(Context);
  return <div>{value}</div>;
};

export default Child;

我们先创建一个context,在祖先组件中作为Component使用,在需要接收数据的子组件,我们可以将他传入useContext 的hook中,就可以接收到数据了,这样感觉vue会更方便一点

小结

	Vue	React
提供	使用porvide提供数据	creatContext定义初始数据, 再使用 <xxx.Porvider>提供数据
获取	使用inject注入数据	使用useContext获取数据

结尾

希望对你有帮助,有时间更新下一节~