Каков идиоматический способ создания компонента внутри компонента с помощью хуков? - PullRequest
Новая
       24

Каков идиоматический способ создания компонента внутри компонента с помощью хуков?

0 голосов
/ 17 мая 2019

Я, что FooBlock перерисовать только с изменением foo 

export function FooBarComponent() {

  const [foo, setFoo] = useState(1)

  const [bar, setBar] = useState(1)

  const FooBlock = () => {
    console.log("render", foo)
    return <div>{foo}</div>
  }

  return <div>
    <button onClick={() => setFoo(x => x + 1)}>foo</button> {foo}
    <button onClick={() => setBar(x => x + 1)}>bar</button> {bar}
    <FooBlock/>
  </div>

}

Я могу сделать что-то вроде этого 

  const FooBlock = useMemo(() => React.memo(() => {
    console.log("render", foo)
    return <div>{foo}</div>
  }), [foo])

Но это выглядит немного странно.Есть ли лучший способ?

1 Ответ

0 голосов
/ 17 мая 2019

Вам не нужно создавать компонент внутри компонента. Вы можете просто написать его вне компонента и передать ему реквизит. 

  const FooBlock = ({foo}) => {
    console.log("render", foo)
    return <div>{foo}</div>
  }
export function FooBarComponent() {

  const [foo, setFoo] = useState(1)

  const [bar, setBar] = useState(1)



  return <div>
    <button onClick={() => setFoo(x => x + 1)}>foo</button> {foo}
    <button onClick={() => setBar(x => x + 1)}>bar</button> {bar}
    <FooBlock foo={foo}/>
  </div>

}
...