useContext 父子组件传值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import React, { createContext, useContext, useState } from "react";



const CntCtx = createContext()

function Child1() {
  let parentCnt = useContext(CntCtx)
  return (
    <div>
      child1 {parentCnt}
    </div>
  )
}

function Child2() {
  let parentCnt = useContext(CntCtx)
  return (
    <div>
      child2 
      {parentCnt}
    </div>
  )
}

export default function ContextExample() {
  const [ cnt, setCnt ] = useState(0)
  setInterval(()=>{
    setCnt(cnt+1)
  },3000)
  return (
    <div>
      hello world
      <CntCtx.Provider value={cnt}>
        <Child1 />

      </CntCtx.Provider>
    </div>
  )
}

这样 子组件就可以获得 cnt 了

react 中的陷阱

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import React, { createContext, useContext, useEffect, useState } from "react";



const CntCtx = createContext()

function Child1() {
  let parentCnt = useContext(CntCtx)
  return (
    <div>
      child1 {parentCnt}
    </div>
  )
}

function Child2() {
  let parentCnt = useContext(CntCtx)
  return (
    <div>
      child2 
      {parentCnt}
    </div>
  )
}

export default function ContextExample() {
  const [ cnt, setCnt ] = useState(0)
  useEffect(()=>{
    setTimeout(()=>{
      setCnt(cnt+1000)
    },2000)
  },[])


  
  return (
    <div>
      hello world
      <CntCtx.Provider value={cnt}>
        <Child1 />

      </CntCtx.Provider>
    </div>
  )
}

以上代码 只会执行1次

为什么要 将 setTimeout 防止 useEffect 中呢?

如果直接放在 函数里面设置定时器，最后 页面 的 cnt 更新一次，就会被刷新一次，然后反复执行 useState , 这是有问题的

cnt 被添加一次 ， 整个函数就会执行1次， 这就是无状态组件的原理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

import React, { createContext, useContext, useEffect, useState } from "react";



const CntCtx = createContext()

function Child1() {
  let parentCnt = useContext(CntCtx)
  return (
    <div>
      child1 {parentCnt}
    </div>
  )
}

function Child2() {
  let parentCnt = useContext(CntCtx)
  return (
    <div>
      child2 
      {parentCnt}
    </div>
  )
}

export default function ContextExample() {
  const [ cnt, setCnt ] = useState(0)
 
  // setTimeout(()=>{
  //   setCnt(cnt+1000)
  // },2000)
   
  console.log(`页面重新绘制 ${cnt}`)


  return (
    <div>
      hello world

      <button onClick={()=> setCnt(cnt+1)} >
       add </button>
      <CntCtx.Provider value={cnt}>
        <Child1 />

      </CntCtx.Provider>
    </div>
  )
}