【笔记】React的函数式组件

发表于 分类于 阅读次数：

前言

React的函数式（Functional Component）组件学习笔记

定义组件

  • 组件名首字母大写
  • return可以返回的数据类型，与类组件相同
1
2
3
4
5
6
7
const Component = function (props) {
  return (
    <></>
  );
}

export default Component;
  • 通过className代替class属性
1
2
3
4
5
6
7
const Component = function (props) {
  return (
    <>
      <div className=""></div>
    </>
  );
}
  • 通过htmlFor代替for属性
1
2
3
4
5
6
7
8
9
const Component = function (props) {
  return (
    <>
      <label htmlFor="input">
        <input id="input" type="text" />
      </label>
    </>
  );
}

定义纯组件

1
2
3
4
5
6
7
8
9
import { memo } from "react";

const Component = memo(function (props) {
  return (
    <></>
  );
});

export default Component;

父子组件跨多级传递数据

祖先组件传递数据给子孙组件

创建上下文对象

  • 上下文对象名首字母大写
src/AppContext.jsx
1
2
3
import React from "react";

const AppContext = React.createContext();
定义默认值
src/AppContext.jsx
1
2
3
import React from "react";

const AppContext = React.createContext({key: "default"});

组件组件向子孙组件传递数据

  • 使用上下文对象的Provider组件包裹子组件
  • 在上下文对象的Provider组件定义value属性，通过value属性向子孙传递数据
src/GrandFather.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import AppContext from "./AppContext";
import Father from "./Father";

function GrandFather() {
  return (
    <>
      <AppContext.Provider value={ {key: "value"} }>
        <Father />
      </AppContext.Provider>
    </>
  );
}

export default GrandFather;
src/Father.jsx
1
2
3
4
5
6
7
8
9
10
11
import Son from "./Son";

function Father() {
  return (
    <>
      <Son />
    </>
  );
}

export default Father;

子孙组件获取祖先组件传递的数据

通过向Customer中传递回调函数获取数据
src/Son.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import AppContext from "./AppContext";

function Son() {
  return (
    <>
      <AppContext.Consumer>
        {
          (context) => {
            return context.key;
          }
        }
      </AppContext.Consumer>
    </>
  );
}

export default Son;
  • 这种方式可以获取多种上下文的数据
src/Son.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import AppContext from "./AppContext";

function Son() {
  return (
    <>
      <App1Context.Consumer>
        {
          (context) => {
            return context.key;
          }
        }
      </App1Context.Consumer>
      <App2Context.Consumer>
        {
          (context) => {
            return context.key;
          }
        }
      </App2Context.Consumer>
    </>
  );
}

export default Son;

完成