ИСПОЛЬЗОВАНИЕ РЕАГИМАЦИИ УСЕКТОТ

React.js

useContext — это контекст

Что такое контекст?

глобальная переменнаяявляется глобальнымконтекст, он доступен глобально; контекст — это вашЗапустите фрагмент кода, который вы хотите знать все переменные

Методы, используемые useContext

1. Сначала создайте createContext

Создайте и инициализируйте с помощью createContext

const C = createContext(null);

2. Поставщик указывает область использования

В очерченном диапазоне передайте операции чтения и записи объектов операции, а затем вы можете использовать контекст

    <C.Provider value={{n,setN}}>
      这是爷爷
      <Baba></Baba>
    </C.Provider>

3. Наконец, используйте useContext

Используйте useContext для принятия контекста, поскольку объект передается, объект также должен быть принят

const {n,setN} = useContext(C)；

кейс

кейс: Используйте переменную n, определенную в родительском компоненте во внучатом компоненте, и выполните операцию +1.

import React, { createContext, useContext, useReducer, useState } from 'react'
import ReactDOM from 'react-dom'

// 创造一个上下文
const C = createContext(null);

function App(){
  const [n,setN] = useState(0)
  return(
    // 指定上下文使用范围，使用provider,并传入读数据和写入据
    <C.Provider value={{n,setN}}>
      这是爷爷
      <Baba></Baba>
    </C.Provider>
  )
}

function Baba(){
  return(
    <div>
      这是爸爸
      <Child></Child>
    </div>
  )
}
function Child(){
  // 使用上下文，因为传入的是对象，则接受也应该是对象
  const {n,setN} = useContext(C)
  const add=()=>{
    setN(n=>n+1)
  };
  return(
    <div>
      这是儿子:n:{n}
      <button onClick={add}>+1</button>
    </div>
  )
}


ReactDOM.render(<App />,document.getElementById('root'));

Уведомление

При использовании useContext для изменения фрагмента данных он ищет и сравнивает измененные данные уровень за уровнем, а затем отображает их, а не отслеживает переменные посредством реагирования на данные.

То есть после нажатия на операцию +1 React начинает выполнять код из функции App.

А Vue3 использует реакцию на данные для мониторинга переменных.Пока переменные изменяются, данные будут изменены, а код не будет выполняться повторно.

Категории