props daring

即便是不使用useCallback和useContext也是可以实现性能优化的

useCallback的一些用法可以看Memoization中的描述

props daring #

普通的props一直向下传递的props daring #

import React from "react";

const App = () =>{
  const [count,setCount] = React.useState(0)
  return(
    <div>
        <div>我是父组件{count}</div>
        <C1 count={count}></C1>
        <button onClick={()=>{setCount(count+1)}}>+</button>
    </div>
  )
}
export default App;

const C1 = ({count}) =>{
  return(
    <div>
      <div>我是c1</div>
      <C2 count={count}></C2>
    </div>
  )
}

const C2 = ({count}) =>{
  return(
    <div>
       <div>我是c2</div>
       <C3 count={count}></C3>
    </div>
  )
}

const C3 = ({count}) =>{
  return(
    <div>
       <div>我是c3----{count}</div>
       <></>
    </div>
  )
}
import React from "react";

const App = () =>{
  const [count,setCount] = React.useState(0)
  return(
    <div>
        <div>我是父组件{count}</div>
        <C1 count={count}></C1>
        <button onClick={()=>{setCount(count+1)}}>+</button>
    </div>
  )
}
export default App;

const C1 = ({count}) =>{
  return(
    <div>
      <div>我是c1</div>
      <C2 count={count}></C2>
    </div>
  )
}

const C2 = ({count}) =>{
  return(
    <div>
       <div>我是c2</div>
       <C3 count={count}></C3>
    </div>
  )
}

const C3 = ({count}) =>{
  return(
    <div>
       <div>我是c3----{count}</div>
       <></>
    </div>
  )
}

使用useContext(不建议) #

useContext大多数情况下被过度使用了，把变得组件和不变的组件进行抽离，再利用react的children属性不仅提高性能也舒服的多useContext一般在一些库里用的比较多

let contextCount = React.createContext(0)

const App = () =>{
  const [count,setCount] = React.useState(0)
  return(
    <div>
        <contextCount.Provider value={{count}}>
        <div>我是父组件{count}</div>
        <C1 count={count}></C1>
        <button onClick={()=>{setCount(count+1)}}>+</button>
        </contextCount.Provider>
        <C3></C3>         //useContext的弊端之一，就是如果没有给默认值就会错误。
    </div>
  )
}
export default App;

const C1 = ({count}) =>{
  return(
    <div>
      <div>我是c1</div>
      <C2 count={count}></C2>
    </div>
  )
}

const C2 = ({count}) =>{
  return(
    <div>
       <div>我是c2</div>
       <C3 count={count}></C3>
    </div>
  )
}

const C3 = ({}) =>{
  const {count} = React.useContext(contextCount)
  return(
    <div>
       <div>我是c3----{count ? count : '...'}</div>    
       <></>
    </div>
  )
}
let contextCount = React.createContext(0)

const App = () =>{
  const [count,setCount] = React.useState(0)
  return(
    <div>
        <contextCount.Provider value={{count}}>
        <div>我是父组件{count}</div>
        <C1 count={count}></C1>
        <button onClick={()=>{setCount(count+1)}}>+</button>
        </contextCount.Provider>
        <C3></C3>         //useContext的弊端之一，就是如果没有给默认值就会错误。
    </div>
  )
}
export default App;

const C1 = ({count}) =>{
  return(
    <div>
      <div>我是c1</div>
      <C2 count={count}></C2>
    </div>
  )
}

const C2 = ({count}) =>{
  return(
    <div>
       <div>我是c2</div>
       <C3 count={count}></C3>
    </div>
  )
}

const C3 = ({}) =>{
  const {count} = React.useContext(contextCount)
  return(
    <div>
       <div>我是c3----{count ? count : '...'}</div>    
       <></>
    </div>
  )
}

使用children属性 #

const App = () =>{
  const [count,setCount] = React.useState(0)
  return(
    <div>
        <div>我是父组件{count}</div>
        <C1 >
          <C2>
            <C3 count={count}></C3>
          </C2>
        </C1>
        <button onClick={()=>{setCount(count+1)}}>+</button>
    </div>
  )
}
export default App;

const C1 = ({children}) =>{
  return(
    <div>
      <div>我是c1</div>
      {children}
    </div>
  )
}

const C2 = ({children}) =>{
  return(
    <div>
       <div>我是c2</div>
      {children}
    </div>
  )
}

const C3 = ({count}) =>{
  return(
    <div>
       <div>我是c3----{count}</div>
       <></>
    </div>
  )
}
const App = () =>{
  const [count,setCount] = React.useState(0)
  return(
    <div>
        <div>我是父组件{count}</div>
        <C1 >
          <C2>
            <C3 count={count}></C3>
          </C2>
        </C1>
        <button onClick={()=>{setCount(count+1)}}>+</button>
    </div>
  )
}
export default App;

const C1 = ({children}) =>{
  return(
    <div>
      <div>我是c1</div>
      {children}
    </div>
  )
}

const C2 = ({children}) =>{
  return(
    <div>
       <div>我是c2</div>
      {children}
    </div>
  )
}

const C3 = ({count}) =>{
  return(
    <div>
       <div>我是c3----{count}</div>
       <></>
    </div>
  )
}