React学习-组件通信

子父组件通信

父组件

• 父组件需要将需要传入的值放在子组件的标签中
• 如：<VoteButton change={change} />

const VoteMain = (props: Props) => {
  const change = (type: string) => {
    return () => {
      switch (type) {
        case "ok":
          props.handel("ok");
          break;
        case "not":
          props.handel("not");
          break;
        case "other":
          props.handel("other");
          break;
        default:
          break;
      }
    };
  };

  return <VoteButton change={change} />;
};

子组件

• 在函数式组件中，需要接受父组件传入的值
• 需要接受props参数
• 如：props.num.ok

const VoteMain = (props: Props) => {
    return (
        <>
        <Tag color="#f50">赞同人数：{props.num.ok}</Tag> <br />
        <Tag color="#2db7f5">反对人数：{props.num.not}</Tag> <br />
        <Tag color="#87d068">干点别的人数：{props.num.other}</Tag> <br />
        <Tag color="#108ee9">支持率：{ratio}</Tag>
        </>
    );
};

祖先和后代通信

• 安装events

npm i -D events
yarn add events

定义文件

import EventEmitter from "events";
const eventBus = new EventEmitter();

export default eventBus;

触发事件

import eventBus from '../../utils/eventBus';
eventBus.emit('触发事件名', 参数1, 参数2,参数3...)

监听事件

import eventBus from '../../utils/eventBus';
				// 监听的事件名   抽离简化代码
eventBus.addListener("sayHello", this.handleSayHelloListener)

移出事件

import eventBus from '../../utils/eventBus';
					// 监听的事件名   抽离简化代码
eventBus.removeListener("sayHello", this.handleSayHelloListener)

样式私有化

• 在react中使用样式方式有多种，让样式私有化有三种方式
• 分别是
  1. 使用行类样式，可以让样式私有化
  2. 利用对象的方式，也可以让样式私有化
  3. 用样式导出的方式—推荐使用

行类样式

• 在使用行类样式时，需要注意在style标签中，需要写两个{}

<Tag color="#f50" style={{ color: "red" }}>
    赞同人数：{props.num.ok}
</Tag>

对象形式

• 利用对象，在对象中写键值对，之后引用到标签的style中

const TagStyle = {
    color: "red",
};
const VoteMain = (props: Props) => {
    return (
        <Tag color="#f50" style={TagStyle}>
            赞同人数：{props.num.ok}
        </Tag>
    );
};

样式导出

• 创建文件xxx.module.css
• 在组件中引用

样式文件

• voteMain.module.css

.box {
  color: red;
}

引入样式文件

import Style from "./voteMain.module.css";

使用

const VoteMain = (props: Props) => {
    return (
        <Tag color="#f50" style={Style.box}>
            赞同人数：{props.num.ok}
        </Tag>
    );
};

高阶函数和函数柯里化

高阶函数

• 定义：如果一个函数符合下面两个规范中的任何一个,那该函数就是高阶函数

  • 若A函数,接受的参数是一个函数,那么A就可以称之为高阶函数

  • 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数

常见的高阶函数有:Promise、setTimeout()、arr.map()等等

函数柯里化

通过函数调用继续返回函数的方式,实现对此接受参数最后统一处理的函数编码形式。

function sum(a){ return (b)=>{return c=>{ return a+b+c} }}

// 普通的add函数
function add(x, y) {
  return x + y;
}

// 柯里化后
function curryingAdd(x) {
  return function(y) {
    return x + y;
  };
}