❝Британский поэт Сассун в поэзии «Я, Прошлое, Существование Настоящее и Будущее» пишет: «В me the tiger sniffs the rose" Поэт Юй Гуанчжун перевел это как: «С тигром в сердце я осторожно вдыхаю запах розы». ❞

Всем привет,Я«Семь, восемь, девять»。

сегодня,Давайте продолжим«Фронтальное интервью»из Очки знаний。давайте поговорим о«Реагировать на практике»из相关Очки знанийиспецифическийизалгоритм。

Большинство статей этой серии представляют собой краткое изложение знаний из предыдущих статей. Если вы хотите узнать больше о соответствующем содержании, перейдите к соответствующей серии для обсуждения.

Если вы хотите узнать больше об этой серии статей, вы можете обратиться к статьям, которые мы опубликовали. Ниже приведены прошлые статьи.

Список статей

1. Лекция по ключевым концепциям CSS
2. Объяснение базовых знаний JS_Basic
3. Сетевое общение_Очки знаний сосредоточены
4. JS_рукописная реализация
5. Подробные сведения о начальном инжиниринге_точках знаний
6. Front-end framework_Опыты знаний React

Ладно, уже поздно, давайте приступим к делу.

Чему вы можете научиться

❝

1. TS_React: используйте дженерики для улучшения типов
2. TS_React:Набор текста
3. TS_React: обратный вызов типизированного события
4. React API

❞

TS_React: используйте дженерики для улучшения типов

TypeScript что такое

❝TypeScript Это язык программирования с открытым исходным кодом Microsoft. это JavaScript из⼀индивидуальный«Суперсет»。 по существу в сторонуJSДобавлен опциональноиз

1. «Статический тип»
2. «Объектно-ориентированное программирование на основе классов»

❞

TypeScript Предоставляйте новейшие и развивающиеся JavaScript недвижимость, в том числе из 2015 ежегодный ECMAScript и функции в будущих предложениях, такие как асинхронная функциональность и Decorators,Чтобы помочь создать надежные компоненты.

TypeScript и JavaScript Разница

Типичный рабочий процесс TypeScript

Включено в изображение выше 3 индивидуальный ts ⽂куски：a.ts、b.ts и c.ts。Эти⽂куски Воля被 TypeScript Компилятор, скомпилированный в соответствии с настроенными параметрами компиляции в 3 индивидуальный js файл, т.е. a.js、b.js и c.js。для⼤большинство делает⽤ TypeScript развитый Web проект, мы также скомпилируем и сгенерируем js ⽂куски进⾏«Упаковка»,Затем разворачивается существование.

Особенности TypeScript

TypeScript имеет три основные функции:

1. «Начал с JavaScript, вернулся на JavaScript» TypeScript Может скомпилировать чистый, краткий JavaScript код,и Может бежатьсуществоватьв любом браузере、Node.js окружение и любая поддержка ECMAScript 3（илиболее поздняя версия）изJavaScript в двигателе.
2. «Мощная система типов» «Система типов»позволять JavaScript Разработано существование JavaScript При подаче заявки используйте эффективные инструменты разработки и стандартные операции, такие как статическая проверка и рефакторинг кода.
3. "Передовой JavaScript」 TypeScript Предоставляйте новейшие и развивающиеся JavaScript недвижимость, в том числе из 2015 ежегодный ECMAScript из Функции в будущих предложениях, такие как асинхронные функции Декораторы, помогающие создавать надежные компоненты.

Что такое дженерики?

❝Общий относится кизда«Параметризация типа»：Вот-вот получится что-то«Параметризация конкретных из типов» ❞

вроде C++/Java/Rust Такой OOP на языке,Может«Используйте дженерики для создания повторно используемых компонентов, которые могут поддерживать несколько типов данных».。 Таким образом, пользователи могут использовать компоненты со своими собственными типами данных.

❝Дженерики дизайнаиз「Ключ」дасуществовать«Обеспечьте значимые ограничения между участниками»,Эти成员Можетда：добрыйиз Члены экземпляра、Метод класса、Параметры функции и функция получают значение. ❞

Типы TypeScriptи объект JavaScriptруководить Сравнивать。

❝основнойиз"разница"да

• существовать JavaScript середина,заботаизда变量из"ценить"
• существовать TypeScript середина,заботаизда变量из"тип"

❞

Но длянасизUserНапример,Используйте одининдивидуальный"Общий"смотреть起来да Такой。

// `User` Сейчас существуют — это родовой тип
const user: User<'существовать Проволока' | 'оффлайн'>;

// Мы можем вручную добавить нового человека нового типа. (праздный)
const user: User<'существовать Проволока' | 'оффлайн' | 'праздный'>;

Что сказано выше user«Переменная имеет типUserизобъекта"。

Давайте продолжим来实сейчасэтотиндивидуальный"тип"。

// Определение универсального типа
type User<StatusOptions> = {
  name: string;
  status: StatusOptions;
};

StatusOptions называется тип типа переменной переменная, в то время как User говорили, что это Общий тип универсальный type。

Каково использование дженериков?

Обычно ситуация такая,когда ты хочешь«Один тип существования является общим для многих индивидуальных экземпляров, и каждый индивидуальный экземпляр в чем-то отличается».：Вот этоиндивидуальныйдобрый型да"динамичный"из。

Во-первых, давайте определим индивидуального Генерал з identity функция,функцияиз「возвращатьсяценитьиздобрый型」иэтоиз«Параметры те же»

Наша цель – сделать identity функция Может适⽤В«Любой конкретный тип»,для Для достижения этой цели,нас Может使⽤"Общий"решить этоиндивидуальныйвопрос,Конкретный метод реализации заключается в следующем:

function identity <T>(value: T) : T {
 return value;
}
console.log(identity<Number>(1)) // 1

Видеть <T> язык法,Сразу「Параметры передачи карты такие же」,Приведенный выше код передает тип, который мы хотим использовать для вызова определенной функции.

也Может引⼊определение надеждыиз«Любое количество переменных типа»。⽐нравитьсянас引⼊⼀индивидуальныйновыйиздобрый型变量 U , используемый для расширения нашего определения identity функция:

function identity <T, U>(value: T, message: U) : T {
 console.log(message);
 return value;
}
console.log(identity<Number, string>(68, «ТС такой вкусный»);

Общие ограничения

иногданас可能希望«Ограничить количество типов, принимаемых каждой переменной типа индивидуальный»,этот Сразуда「Общие ограничения」изделать⽤。Вниз⾯нас来举⼏индивидуальныйпример⼦,Расскажите, как использовать общие ограничения.

Убедитесь, что свойство существует

иногда,нас希望«Переменные типа соответствуют определенным атрибутам, хранящимся в типе».。В это время,Если мы явно не определим конкретный атрибут как переменную типа для,В противном случае компилятор не узнает об их существовании.

Например, при работе со строками или массивами мы предполагаем length Свойства доступны. Давайте использовать его снова identity функцию и попробуйте вывести длину аргумента:

function identity<T>(arg: T): T {
 console.log(arg.length); // Error
 return arg;
}

существуют В этом случае,«Компилятор»не буду знать T содержит length свойство,尤其дасуществовать Может«Присвойте любой тип переменной типа T из情况Вниз」。нас需хотеть Делатьиз Сразудапозволятьдобрый型变量 extends ⼀индивидуальный содержит необходимые нам атрибуты интерфейса, например:

interface Length {
 length: number;
}
function identity<T extends Length>(arg: T): T {
 console.log(arg.length); // Вы можете получить атрибут длины
 return arg;
}

T extends Length Используется, чтобы сообщить компилятору, что наша поддержка реализована. Length Любой тип интерфейса.

Общий синтаксис функции стрелки в jsx

В предыдущих примерах мы показали только, как использовать дженерики для определения синтаксиса обычных функций, а не синтаксиса стрелочных функций, представленного в ES6.

// ES6 из синтаксиса стрелочной функции
const identity = (arg) => {
  return arg;
};

Если вы хотите работать со стрелочными функциями, вам необходимо использовать следующий синтаксис.

// Путь 1
const identity = <ArgType,>(arg: ArgType): ArgType => {
  return arg;
};

// Способ 2
const identity = <ArgType extends unknown>(arg: ArgType): ArgType => {
  return arg;
};

出сейчас上述вопросизисточниксуществовать В：「этотдаTSX(TypeScript+ JSX)из特定язык法」。существоватьнормальныйиз TypeScript , нет необходимости использовать этот обходной путь.

TS_React:Набор текста

вывод типа

❝существоватьбольшинство из них,TS都Может根据hookсерединаизценить来сделать выводэто们издобрый型：也Сразуданас常说из「вывод типа」 ❞

чтодлявывод типа,Проще говоря：「вывод типа」Сразуда«Возможность вывести тип на основе выражения присваивания»。ts采использовать Волядобрый型отметка声明放существоватьпосле переменных（Прямо сейчас«Введите постфикс»）изспособ работы с переменнымииздобрый型руководитьотметка。И сделать⽤«Введите постфикс аннотации»из好处Сразудакомпилировать器Можетпроходитькод所существоватьиз«Контекст выводит соответствующий тип»,Нет необходимости снова объявлять тип переменной.

картина

• иметь"Значение инициализации из переменной"
• иметь"Значение по умолчанию из параметров функции"
• "Функция появиласьиз типа"

都Может根据«Контекстуальный вывод»публично заявить。

Например,Вниз面изкод Можетсуществоватьts环境серединанормальный运行,и способенпроходитьвывод типаполученныйnameиздобрый型дляstringдобрый型。

const [name, setName] = useState('Передняя часть Цибацзю');

Когда не стоит полагаться на вывод типа

В следующих двух ситуациях вывод типа бесполезен.

• tsпредполагаемыйиздобрый型«Слишком свободный»
• вывод типаError

Предполагаемый тип слишком свободный

нас Доизпримерребенок--иметьодининдивидуальный字符串добрый型изname。ноданас假设этотиндивидуальныйname只能иметьдваиндивидуальный«Резервная стоимость»серединаизодининдивидуальный。

существуют В этом случае,насвстреча希望nameиметьодининдивидуальный非常специфическийиздобрый型,Напримерэтотиндивидуальныйдобрый型。

type Name = 'Передняя часть Цибацзю' | «Внешний инженер» ;

Этот тип использует как типы объединения, так и литеральные типы.

существуют В этом случае,сделать выводиздобрый型«Слишком свободный»（даstring,Вместо этого нам нужна из2индивидуальная строка из определенного подмножества),В этом случае тип необходимо указать самостоятельно.

const [name, setName] = useState<Name>('Передняя часть Цибацзю');

вывод типаError

иногда,сделать выводиздобрый型да错误из（или ВОЗ«Слишком ограничительный»不даты想хотетьиздобрый型）。этот种情况经常发生существоватьReactизuseState «значение по умолчанию»середина。Например,name из初始ценитьдаnull。

const [name, setName] = useState(null);

существуют В этом случае,TypeScript встречапредполагаемыйnameданулевой типиз（этот意味着это«Всегда ноль»）。этот显然да错误из：наскназадвстречахочу name Установите отдельную строку.

В этот момент вы должны сказать TypeScript,Это могут быть и другие виды.

const [name, setName] = useState<string | null>(null);

После обработки следующим образом,TypeScript встреча正确理解nameМожетдаnull也Можетдаstring。

❝Здесь следует упомянуть, что,«Когда вывод не работает,Следует полагаться на общие параметры вместо утверждений типа"。

• const [name, setName] = useState<Name>('Передняя часть Цибацзю'); «Рекомендую»
• const [name, setName] = useState('Передняя часть Цибацзю' as Name); «Не рекомендуется»

❞

Введено useState

существовать Передний,Мы уже говорили об этом,нравитьсячтоиметь дело сuseStateизразличные ситуации。этот里Сразу不существоватьнеоднократно。

const [name, setName] = useState<string | null>(null);

Введено useReducer

useReducer соотношение типов useState хотеть复杂один些。на самом делеuseStateСразудаuseReducerиз Упрощенная версия。

противuseReducerиметьдва样东西хотеть「Ввод текстаиметь дело с」：stateиaction。

этот里иметьодининдивидуальныйuseReducerиз简单примерребенок。противinputСделайте это простоизданные收集иметь дело с。

import { useReducer } from 'react';

const initialValue = {
  username: '',
  email: '',
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'username':
      return { ...state, username: action.payload };
    case 'email':
      return { ...state, email: action.payload };
    case 'reset':
      return initialValue;
    default:
      throw new Ошибка(`Неопределенное действие: ${action.type}`);
  }
};

const Form = () => {
  const [state, dispatch] = useReducer(reducer, initialValue);
  return (
    <div>
      //....
    </div>
  );
};

export default Form;

Типизированное состояние редуктора

У нас есть два варианта Ввода текстаreducer-state。

• Использовать начальное значение (если есть) typeof Оператор
• использовать«Введите псевдоним»

Используйте оператор typeof

const initialValue = {
  username: '',
  email: '',
};

+ const reducer = (state: typeof initialValue, action) => {
    ///....
};

Используйте псевдонимы типов

+type State = {
+  username: string;
+  email: string;
+};

+ const reducer = (state: State, action) => {
    // ....
};

Типизированные действия редуктора

reducer-actionсоотношение типовreducer-stateхотеть难один点,потому чтодляэтоиз«Структура будет зависеть от конкретнойactionи измениться»。

Например, для username-action,Мы могли бы ожидать следующих типов.

type UsernameAction = {
  type: 'username';
  payload: string;
};

Но для reset-action,нас不需хотетьpayloadПоле。

type ResetAction = {
  type: 'reset';
};

нас Может借助«Тип Союза»относиться к разным по-разномуизaction。

const initialValue = {
  username: "",
  email: ""
};

+type Action =
+  | { type: "username"; payload: string }
+  | { type: "email"; payload: string }
+  | { type: "reset" };

+ const reducer = (state: typeof initialValue, action: Action) => {
    //....
};

Тип действиявыражатьизда,это Можетпринимать联合добрый型середина包含из«Любой из трех типов»。потому что此,если TypeScript Видеть action.typeдаusername,он автоматически узнает, что это должен быть первый случай,иpayload应该даодининдивидуальныйstring。

❝проходитьверноstate/actionВвод текстаназад,useReducerспособен начать сreducerфункцияизtypeсерединапредполагаемыйэто需хотетьизодин切。 ❞

Введено useRef

useRef Есть два основных варианта использования

• 保житьодининдивидуальный«Пользовательское значение переменной»（этоизценить变更不встреча触发возобновлять）。
• Сохраняет ссылку на объект DOM.

введенное изменяемое значение

Это в основном и useState такой же。хочуuseRef保житьодининдивидуальный Настроитьизценить,Вам нужно сказать это этому индивидуальному типу.

function Timer() {
+  const intervalRef = useRef<number | undefined>();

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });

  // ...
}

Типизированные узлы DOM

существоватьDOMузел上использоватьuseRefизодининдивидуальный经典использоватьпримердаиметь дело сinputэлементизfocus。

mport { useRef, useEffect } from 'react';

const AutoFocusInput = () => {
+  const inputRef = useRef(null);

  useEffect(() => {
+    inputRef.current.focus();
  }, []);

+  return <input ref={inputRef} type="text" value="Передняя часть Цибацзю" />;
};

export default AutoFocusInput;

TypeScript иметь«Встроенный тип элемента DOM»。Этидобрый型из结构общийдатакой жеиз：

❝еслиnameдаты正существоватьиспользоватьиз"HTML-тег имени",соответствующийиздобрый型ВолядаHTML${Name}Element。 Вот некоторые особые случаи

• <a>Этикеткаиздобрый型дляHTMLAnchorElement
• <h1>Этикеткаиздобрый型дляHTMLHeadingElement

❞

для<input>,该добрый型из名称ВолядаHTMLInputElement。

mport { useRef, useEffect } from 'react';

const AutoFocusInput = () => {
+  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
+    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} type="text" value="Передняя часть Цибацзю" />;
};

export default AutoFocusInput;

"Уведомление"：существоватьinputRef.current?.focus()上加Понятноодининдивидуальный?。этотдапотому чтодлядля TypeScript,inputRef.current«Может быть, это Сора»。существуют В этом случае,Мы знаем, что оно не будет пустым,потому чтодляэтодасуществовать useEffect Перед первым запуском React Заполненный.

набрал впередRef

иногдахочуrefвперед кподкомпонент。хотеть Делатьприезжатьэтотодин点,существовать React в мы должны использовать forwardRef 来«Компоненты упаковки»。

import { ChangeEvent } from 'react';

type Props = {
  value: string,
  handleChange: (event: ChangeEvent<HTMLInputElement>) => void,
};

const TextInput = ({ value, handleChange }: Props) => {
  return <input type="text" value={value} onChange={handleChange} />;
};

Например,житьсуществоватьодининдивидуальный组кускиTextInputинас想существовать父组кускиизместо звонка,проходитьrefконтролироватьподкомпонентinput。

в это время,Сразу需хотетьиспользоватьforwardRef来иметь дело с。

import { forwardRef, ChangeEvent } from 'react';

type Props = {
  value: string;
  handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
};

+const TextInput = forwardRef<HTMLInputElement, Props>(
+  ({ value, handleChange }, ref) => {
    return (
+      <input ref={ref} type="text" value={value} onChange={handleChange} />
    );
  }
);

Этот синтаксис требует только forwardRef поставлятьдолжноожиданияизHTMLElement（существуют В этом случаедаHTMLInputElement）。

❝«Есть одна вещь, на которую следует обратить внимание».:组кускипараметрrefиpropsиззакази Дженерикииз<HTMLInputElement, Props>不один样。 ❞

Набрал useEffect и useLayoutEffect.

❝«Вам не обязательно давать им какой-либо тип» ❞

唯один需хотеть Уведомлениеизда«Неявный возврат»。useEffectвиз Обратный вызов долженчто такое Ни одинвозвращаться,или ВОЗдаодининдивидуальныйвстреча清理任что副делатьиспользоватьизDestructorфункция（«Деструктор»,Это слово индивидуальный заимствовано из оператора класса C++)

Набрал useMemo и useCallback.

❝«Вам не обязательно давать им какой-либо тип» ❞

Типизированный useContext

дляcontextпоставлятьдобрый型да非常容易из。первый,дляcontextиз"ценить"создаватьодининдивидуальныйдобрый型,然назад把этоделатьдляодининдивидуальный"Общий"поставлять ДаватьcreateContextфункция。

import React, { createContext, useEffect, useState, ReactNode } from 'react';

+type User = {
+  name: string;
+  email: string;
+  freeTrial: boolean;
+};

+type AuthValue = {
+  user: User | null;
+  signOut: () => void;
+};

+const AuthContext = createContext<AuthValue | undefined>(undefined);

type Props = {
  children: ReactNode;
};

const AuthContextProvider = ({ children }: Props) => {
  const [user, setUser] = useState(null);

  const signOut = () => {
    setUser(null);
  };

  useEffect(() => {
    // Лечение побочных эффектов
  }, []);

  return (
+    <AuthContext.Provider value={{ user, signOut }}>
      {children}
+    </AuthContext.Provider>
  );
};

export default AuthContextProvider;

один旦ты向createContextпоставлять Понятно Дженерики,Остальные вещи,Все поtsдля Ты делаешь это для меня。

Проблема с приведенной выше индивидуальной реализацией заключается в том,,СразуTypeScriptс точки зрения,contextизценить Можетда未определениеиз。也Сразудасуществоватьнасиспользоватьcontextизценитьизкогда,Он может быть недоступен. в это время,ts可能встреча阻拦кодизкомпилировать。

нравитьсячто解决contextизценить可能да未определениеиз Какова ситуация?。наспротивcontextиз获取Может Используйте одининдивидуальный「Настроитьhook。」

export const useAuthContext = () => {
  const context = useContext(AuthContext);

  if (context === undefined) {
    throw new Ошибка('useAuthContext должен использоваться в контексте AuthContext');
  }

  return context;
};

проходить«Тип защиты»,使得нассуществоватьиспользоватьcontextизкогда,Всегда есть ценность из.

Типизированные пользовательские крючки

❝「Ввод текста Настроитьhookпо сутии Ввод Текст То же, что и обычные функции" ❞

TS_React: обратный вызов типизированного события

1. Ввод текста«Обработчик событий и параметры»
2. Ввод текста«Сам обработчик событий»
3. полагаться на「вывод типа」

Типизированные параметры обработчика событий (событие)

先иметь дело сonClick事куски。React поставлять Понятноодининдивидуальный MouseEvent Типа, вы можете использовать его напрямую!

import { 
    useState, 
+   MouseEvent,
} from 'react';

export default function App() {
    
  // Опустить часть кода
  
+  const handleClick = (event: MouseEvent) => {
    console.log('Отправка сработала');
  };

  return (
    <div className="App">
      <h1>Передняя часть Цибацзю</h1>
      <button onClick={handleClick}>представлять на рассмотрение</button>
    </div>
  );
}

❝onClick 事куски实际上да由Reactподдерживатьиз：этодаодининдивидуальный«Синтетическое событие»。 合成事кускидаReactверно«События браузера — это оболочка,Чтобы разные браузеры,У всех одинаковый API。 ❞

handleInputChangeфункцияи handleClick очень похоже,Но есть очевидное различие. Разница в том,,ChangeEvent даодининдивидуальный"Общий",ты«Необходимо указать, какой элемент изDOM используется»。

import { 
    useState, 
+   ChangeEvent
} from 'react';

export default function App() {
  const [inputValue, setInputValue] = useState('');

+ const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  // Опустить часть кода

  return (
    <div className="App">
      <h1>Передняя часть Цибацзю</h1>
      <input value={inputValue} onChange={handleInputChange} />
    </div>
  );
}

существуют Одна вещь, на которую вам нужно обратить внимание в приведенном выше коде, это то, что,HTMLInputElement В частности, относится к входному тегу HTML. Если мы используем textarea,нас Воляиспользовать HTMLTextAreaElement заменить.

Уведомление,MouseEvent Также является индивидуальным дженериком, вы можете существовать и руководить ограничениями на него при необходимости. Например, возьмем вышеизложенное MouseEvent Ограничение на отправку событий мыши исключительно с отдельной кнопки.

const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
  console.log('Отправка сработала');
};

Все еще нужно напоминание из-за,Reactдлянаспоставлять Понятно很много Event Объявление типа объекта.

Тип объекта события «Событие»

Сам обработчик типизированного события

React Заявление, предоставленное документом EventHandler Введите псевдонимы для разных событий EventHandler из«Введите псевдоним»来определение事кускииметь дело сфункцияиздобрый型,Удобнее определить тип ее функции.

import { 
   useState, 
+  ChangeEventHandler, 
+  MouseEventHandler 
} from 'react';

export default function App() {
  const [inputValue, setInputValue] = useState('');

 
+ const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) =>{
    setInputValue(event.target.value);
  };

+  const handleClick: MouseEventHandler = (event) => {
    console.log('Отправка сработала');
  };

  return (
   // ... упущение....
  );
}

依赖вывод типа

ты也Можетполагаться на「вывод типа」,Вам не нужно обрабатывать эту функцию самостоятельно. но,ты需хотеть«Встроенная обработка функций обратного вызова»。

import { useState } from 'react';

export default function App() {
  const [inputValue, setInputValue] = useState('');

  return (
    <div className="App">
      <h1>Передняя часть Цибацзю</h1>
      <input 
        value={inputValue} 
+        onChange={(event) => setInputValue(event.target.value)}
      />
      <button 
+        onClick={(event) => console.log('Отправка сработала')}
      >
        представлять на рассмотрение
      </button>
    </div>
  );
}

React API

1. Класс компонента
2. Инструменты
3. жизненный цикл
4. Hook
5. ReactDom

Класс компонента

Component

существовать React Доступны две формы

1. один种да«Компонент класса»
2. 另один种да«Функциональные компоненты»

И существующие компоненты класса должны наследовать Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, Передняя часть Цибацзю</h1>;
  }
}

PureComponent

PureComponent：встречаверно props и state руководить«Короткое сравнение»,Пропустить ненужное извозобновление,Улучшите производительность компонентов.

Можно сказать PureComponent и Component В принципе то же самое, но PureComponent встреча浅Сравнивать,也Сразуда«Меньше рендерингиз»,такPureComponentодин般использовать В性能优化。

class Welcome extends React.PureComponent {
  render() {
    return <h1>Hello, Передняя часть Цибацзю</h1>;
  }
}

иshouldComponentUpdateиз Какова связь

существоватьжизненный циклсерединаиметьодининдивидуальный shouldComponentUpdate() функция,shouldComponentUpdate()если被определение,Сразувстречаверноновый旧 props、state руководить shallowEqual Сравнивать,«Если старое и новое несовместимы, будет запущено обновление».。

也Можетэтот么理解：PureComponent проходить«Принеси свое»из props и state из浅Сравнивать实сейчас ПонятноshouldComponentUpdate(),этот点Componentне обладает。

❝PureComponent 可能встречапотому что«Глубокая несогласованность данных»и выдать ошибкуизотрицательное суждение,что приводит кshouldComponentUpdateрезультатвозвращатьсяfalse,Интерфейс не возобновляется,Используйте с осторожностью. ❞

memo

memo：комбинированный pureComponent Чистые компоненты componentShouldUpdate()Функция,встречаверновходящийиз 「props」 руководить сравнивается один раз, а затем на основе второго индивидуального значения функции появляется дальнейшее определение того, какие реквизиты требуют возобновления

❝Будьте осторожны memo даодининдивидуальный«Компоненты высокого уровня»,Могут использоваться как функциональные компоненты, так и компоненты классов. ❞

memo Получите два индивидуальных параметра:

function MyComponent(props) {
  
}
function areEqual(prevProps, nextProps) {
  
}
export default React.memo(MyComponent, areEqual);

1. Первый индивидуальный параметр: сам компонент,То есть оптимизировать компонент
2. второйиндивидуальныйпараметр：(pre, next) => boolean,
   • Если true не будет обновляться
   • для false возобновлять
   • pre：Доизданные
   • next：сейчассуществоватьизданные
   • возвращатьсяодининдивидуальный布尔ценить

Что следует учитывать при использовании заметок

React.memo и PureComponent Разница：

• «Разные цели обслуживания»：
  • PureComponent Компоненты класса обслуживания,
  • React.memo既Может Компоненты класса обслуживание, также может обслуживать и функциональные компоненты,
  • useMemo Обслуживание функциональных компонентов
• противизверно象другой：
  • PureComponent противиздаpropsиstate
  • React.memo"Только"противprops来决定да否рендеринг

❝React.memo извторойиндивидуальныйпараметризвозвращатьсяценитьиshouldComponentUpdateизвозвращатьсяценитьда相反из

• React.memo:возвращаться true Компоненты не рендерятся , возвращаться false Рендеринг компонентов.
• shouldComponentUpdate: возвращаться true рендеринг компонентов , возвращаться false Компоненты не рендерятся

❞

forwardRef

forwardRef：«Передать по ссылке»,даодин种проходить组куски向«Подкомпонент»Автоматически передавать ссылкиrefизтехнология。

существовать React середина,React «Не допускаетсяrefпроходитьpropsпередача",потому чтодляrefда组кускисередина固定житьсуществоватьиз,существуют процессы регулировки компонентов,будут рассматриваться специально,иforwardRefСразудадля Понятно解决этоткуски事и诞生из,позволятьrefМожетпроходитьpropsпередача。

// подкомпонент
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} >
    {props.children}
  </button>
));

// В пределах родительского компонента
const ref = React.createRef();
<FancyButton ref={ref}>Кто нажимает на меня!</FancyButton>;

React.Fragment

существовать16.0назад,Официально запущенFragmentконцепция фрагмента,能够позволять「одининдивидуальный组кускивозвращатьсямногоиндивидуальныйэлемент」,React.Fragment 等价В<></>

Fragment и <></>издругой

• Fragment Этому индивидуальному компоненту можно присвоить значение key,Это индекс,
• <></>不能赋ценить

React.lazy

lazy：позволятьтыопределениеодининдивидуальный动态加载组куски,этот样иметь助В缩减 bundle изобъем,И задержка загрузки существовала в первый раз, когда рендеринг не использовал компонент,То есть отложенная загрузка компонентов (компонентов высокого порядка).

lazy 接收одининдивидуальныйфункция,этотиндивидуальныйфункция需хотеть动态调использоватьimport(),нравиться:

const SomeComponent = React.lazy(
    () => import('./SomeComponent')
);

• lazyдолжен«Принять индивидуальную функцию»,нужновозвращатьсяодининдивидуальныйPromise, нужно resolve одининдивидуальный default одининдивидуальныйКомпоненты реагирования,
• lazy долженхотеть配合Suspenseодин起использовать

Suspense

Suspense：позволять组куски"ждать"определенныйиндивидуальный异步组куски操делать,Пока асинхронная операция не завершится.

const OtherComponent = React.lazy(
    () => import('./OtherComponent')
);

function MyComponent() {
  return (
    // существованиеOtherComponent загружается до отображения Spinner
    <React.Suspense fallback={<Spinner />}>
      <OtherComponent />
    </React.Suspense>
  );
}

Profiler

Profiler：этотиндивидуальный组кускииспользовать В性能检测,Может检测один次reactрендеринг компонентовчасиз Накладные расходы на производительность

Этот компонент имеет два параметра:

1. id：логотипProfilerиз唯один性
2. onRender：回调функция,组кускисуществоватьcommitэтап называется

render(
  <App>
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
    <Main {...props} />
  </App>
);

StrictMode

StrictMode：строгий режим,это инструмент для выявления потенциальных проблем в приложениях

и Fragment один样,StrictMode Никакого существующего уровня пользовательского интерфейса не будет, только проверка и предупреждение.

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>        
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>      
      <Footer />
    </div>
  );
}

В приведенном выше коде только ComponentOne иComponentTwo руководитьисследовать。

Обнаружение по следующим аспектам:

• 识别иметь「не безопасножизненный цикл」из组куски
• О устаревшей строке Ref API использоватьиз Предупреждение
• Об устаревшем использовании findDOMNode из Предупреждение
• Обнаружение неожиданных побочных эффектов
• Обнаружение устаревшего контекстного API
• Обеспечьте возможность повторного использования

Инструменты

crateElement

JSX встреча被компилироватьдляReact.createElementизформа,然назад被babelкомпилировать

React.createElement(type, [props], [...children])

1. type

• Нативные компоненты — это теги и строки.,Например, «див»
• в этом случае пользовательский компонент React, который является именем класса или именем функции.
• ReactFragment

1. [props]：верно象,из атрибута в классе dom,Компоненты вprops
2. [...children]：другойизпараметр,Будет отсортировано соответствующим образом

cloneElement

cloneElement：Клонировать и объединитьвозвращатьсяодининдивидуальныйновыйизReactэлемент,

React.createElement(type, [props], [...children])

React.cloneElement()几乎等同В:

<element.type {...element.props} {...props}>
    {children}
</element.type>

createContext

createContext встречасоздаватьодининдивидуальныйОбъект контекста,

• использоватьProviderизvalue来передачаценить
• использоватьConsumerприниматьvalue

Chidren

Children: поставлятьиметь дело сthis.props.children不透明данные结构из实использовать程序。

Children.map

Children.map：Траверс,ивозвращатьсяодининдивидуальныймножество

const Child = ({children}) => {
  const res = React.Children.map(children, (item) => item)
  console.log(res)
  return res
}

Children.forEach

Children.forEach：иChildren.mapдобрый似,другойиздаChildren.forEachи不встречавозвращатьсяценить,Вместо этого оставайтесь на этапе обхода

Children.count

Children.count：возвращатьсяChildизобщийиндивидуальныйчисло,Равно количеству раз, когда будет вызван обратный вызов, переданный в mapилиforEach.

Children.only

Children.only：проверятьChildда否只иметьодининдивидуальныйэлемент,

• в случае,则нормальныйвозвращаться,
• В противном случае будет сообщено об ошибке.

Children.toArray

Children.toArray：к«Плоский массив»изформавозвращатьсяchildren不透明данные结构,Каждому отдельному дочернему элементу назначается ключ.

createRef

createRef：создаватьодининдивидуальныйссылочный объект,Получить информацию об узлах

isValidElement

isValidElement：использовать Впроверятьда否даРеагировать элементы,

• даизразговаривать Сразувозвращатьсяtrue,
• в противном случаевозвращатьсяfalse

version

ПроверятьReactизномер версии

жизненный цикл

React из жизненный цикл В основном включают две отдельные версии большего размера соответственно

1. v16.0вперед
2. v16.4дваиндивидуальный Версия

изжизненный цикл。

До версии 16.0

общий共分для«Четыре этапа»：

1. Инициализация Инициализация
2. Крепление Монтаж
3. возобновлятьUpdate
4. Размонтирование

Инициализация

существует фаза инициализации, будет использоваться constructor() этотиндивидуальный构造функция,нравиться:

constructor(props) {
  super(props);
}

• superизделатьиспользовать
  • Используется для вызова базового класса из конструктора ( constructor() ),
  • 也Воля父组кускиизpropsвводить вподкомпонент,дляподкомпонентчитать
• Операция инициализации,определениеthis.stateизисходное содержание
• Будет выполнено только один раз

Монтаж

1. componentWillMount：существовать组куски挂载приезжатьDOMвперед调использовать
   • этотвиз调использоватьизthis.setState不встречапричина组кускииз重новыйрендеринг,也Может把写существоватьэтот边из Упомянутый контентconstructor(),Так что существующих проектов очень мало.
   • Будет вызван только один раз
2. render: рендеринг
   • если бы толькоpropsиstateизменять（无论ценитьда否иметь变化,два ВОЗиз重передачаи重赋ценить,都Можетпричина组куски重новыйrender）,повторю рендерингрендеринг。
   • return：«Это обязательно,Является индивидуальным элементом React",Не несет ответственности за фактическую работу рендеринга компонента.,Сам React использует этот элемент для вывода DOM.
   • render да«Чистая функция»,не может быть выполненоthis.setState。
3. componentDidMount：组куски挂载приезжатьDOMназад调использовать
   • позвони один раз

Обновлять

1. componentWillReceiveProps(nextProps):调использовать Вpropsпричинаиз组кускивозобновлять过程середина
   • nextProps：父组куски传Давать当вперед组кускиновыйизprops
   • МожетиспользоватьnextPropsиthis.propsдля выявления повторных передачpropsда否изменять（原потому что：不能保证父组куски重传изpropsиметь变化）
   • если бы толькоpropsизменять Сразувстреча,вызвать звонок
2. shouldComponentUpdate(nextProps, nextState)：«Для оптимизации производительности»
   • nextProps：当вперед组кускиизthis.props
   • nextState：当вперед组кускиизthis.state
   • проходить СравниватьnextPropsиnextState,Определить, необходимо ли текущему компоненту продолжать выполнение процесса возобновления.
   • возвращатьсяfalse：выражать停止возобновлять,Используется для уменьшения количества ненужных компонентов рендеринга.,Оптимизация производительности
   • возвращатьсяtrue：Продолжить выполнениевозобновлять
   • картинаcomponentWillReceiveProps（）середина执行Понятноthis.setState,возобновлять Понятноstate,носуществоватьrenderвперед(нравитьсяshouldComponentUpdate,componentWillUpdate),this.stateвсе еще「ориентированныйвозобновлятьвпередизstate」,В противном случае сравнение nextState с текущим компонентом this.stateiz всегда будет истинным.
3. componentWillUpdate(nextProps, nextState)：组кускивозобновлятьвперед调использовать
   • существоватьrenderметодвперед执行
   • Поскольку компонент возобновления будет вызываться,Поэтому он используется редко
4. render：重новыйрендеринг
5. componentDidUpdate(prevProps, prevState)：组кускивозобновлятьназад被调использовать
   • prevProps：组кускивозобновлятьвпередизprops
   • prevState：组кускивозобновлятьвпередизstate
   • Может управлять компонентом возобновленияDOM

Размонтирование

componentWillUnmount：组куски被卸载вперед调использовать

существуют, могу провести здесь кое-какие работы по уборке.,Например, явно используйте таймер в компоненте,ПрозрачныйcomponentDidMountсередина手动создаватьизDOMэлемент等,Чтобы избежать утечек памяти

React v16.4

и v16.0изжизненный цикл сравнения

• "Новый"Понятно -- （дваиндивидуальныйgetXX）
  1. getDerivedStateFromProps
  2. getSnapshotBeforeUpdate
• "Отмена"Понятно -- (трииндивидуальныйcomponmentWillXX)
  1. componentWillMount、
  2. componentWillReceiveProps、
  3. componentWillUpdate

getDerivedStateFromProps

getDerivedStateFromProps(prevProps, prevState)：组куски«При создании ивозобновлять»调использоватьизметод

• prevProps：组кускивозобновлятьвпередизprops
• prevState：组кускивозобновлятьвпередизstate

❝существоватьReact v16.3середина,существоватьсоздаватьивозобновлятьчас,Эту отдельную функцию можно вызвать только в том случае, если она запускается родительским компонентом.,существоватьReact v16.4изменятьдля无论даMounting还даUpdating,Все будут вызваны. ❞

даодининдивидуальный«Статическая функция»,也Сразудаэтотиндивидуальныйфункция不能проходитьthisПосетилclassизсвойство。

❝еслиpropsвходящийизсодержание不需хотеть影响приезжатьтыизstate,那么Сразу需хотетьвозвращатьсяодининдивидуальныйnull,этотиндивидуальный「возвращаться обязательно.」,Поэтому попробуйте записать это в конец функции. ❞

существовать组кускисоздаватьчасивозобновлятьчасиз«Вызывается перед методом рендеринга»,должно

• возвращатьсяодининдивидуальныйверно象来возобновлятьсостояние
• или ВОЗвозвращатьсяnullПриходи или нетвозобновлять任чтосодержание

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps,prevState):Updatingчасизфункция,「существоватьrender之назад调использовать」

• prevProps：组кускивозобновлятьвпередизprops
• prevState：组кускивозобновлятьвпередизstate

умею читать,Но когда DOMиз нельзя использовать,существовать组куски Можетсуществовать可能更изменять До从DOM捕获один些информация（Напримерположение прокрутки）

「возвращатьсяиз任что指都Воляделатьдляпараметрпередача ДаватьcomponentDidUpdate（)」

Note

существуют версия 17.0из версии, официально упразднена

• componentWillMount、
• componentWillReceiveProps、
• componentWillUpdate

React-Hooks

react-hooksдаReact 16.8изпродукт,«Придание жизненного цикла функциональным компонентам»。

Хуки в React v16.8

useState

useState：определение变量,Может理解для他дадобрый Компоненты вthis.stateиспользовать：

const [state, setState] = useState(initialState);

• state：глазиздапоставлять Давать Пользовательский интерфейс, как представление для рендеринга из источника данных
• setState：изменять变 state изфункция,Может理解дляthis.setState
• initialState：初始默认ценить

❝useState иметь点добрый似ВPureComponent,встречаруководитьодининдивидуальный Сравнивать浅из Сравнивать,в Когда объект события передается напрямую, он не возобновляется. ❞

useEffect

useEffect：副делатьиспользовать,Вы можете понять, что for — это компонент класса, изжизненный цикл.,Это также наш наиболее часто используемый крючок.

❝副делатьиспользовать（Side Effect)：да指 function Сама операция не имеет ничего общего со значением, например запрос данных, изменение глобальных переменных, печать, сбор данных, настройка подписок и изменения вручную. React Компоненты в DOM Все это побочные эффекты ❞

1. 不断执行
   • 当useEffect不设立второйиндивидуальныйпараметрчас,независимо от ситуации,будет выполнен
2. 根据依赖ценитьизменять变
   • 设置useEffectизвторойиндивидуальныйценить

useContext

useContext：上Вниз文,добрый似ВContext：其本意Сразуда设置全局共享данные,«Разрешить всем компонентам обмениваться данными на разных уровнях»

useContentизпараметродин般да由createContextизсоздавать,проходить CountContext.Provider Комплектация компонентов, возможность подачи useContext Получите соответствующее значение

useReducer

useReducer：этодобрый似ВreduxФункцияизapi

const [state, dispatch] = useReducer(reducer, initialArg, init);

• state：возобновлятьназадизstateценить
• dispatch：Может理解дляиuseStateизsetStateодин样из Эффект
• reducer：Может理解дляreduxизreducer
• initialArg：初始ценить
• init：Ленивая инициализация

useMemo

useMemo:иmemoиз理念上差不много,都да判断да否满足«Текущие ограничения»来决定да否执行callbackфункция,иuseMemoизвторойиндивидуальныйпараметрдаодининдивидуальный"Множество",использовать этот индивидуальный массив, чтобы определить, следует ли выполнять функцию обратного вызова

❝当одининдивидуальный父组кускисередина调использовать Понятноодининдивидуальныйподкомпонентизкогда,父组кускииз state изменять,Приведёт к возобновлению родительского компонента.,иподкомпонент虽然没иметьизменять,но也встречаруководитьвозобновлять。 ❞

Пока родительский компонент не будет возобновлен,「无论иметь没иметьверноподкомпонентруководить操делать,подкомпонент都встречаруководитьвозобновлять」,useMemoСразудадля Понятно防止этот点и出сейчасиз。

useCallback

useCallbackиuseMemo极其добрый似,Единственная разница в том,

• useMemoвозвращатьсяиздафункция运行изрезультат,
• иuseCallbackвозвращатьсяизда"функция"
  • этотиндивидуальныйфункцияда父组кускипередачаподкомпонентизодининдивидуальныйфункция,Предотвратите ненужные обновления,
  • Во-вторых,этотиндивидуальныйподкомпонентдолжен配合React.memo,В противном случае производительность не только не улучшится, но и может ухудшиться.

useRef

useRef： Может获取当впередэлементиз所иметьсвойство,ивозвращатьсяодининдивидуальныйпеременнаяизссылочный объект,иэтотиндивидуальныйверно象只иметьтекущий атрибут,Можно установитьinitialValue

1. проходитьuseRef获取верно应изРеагировать элементыизсвойствоценить
2. данные кэша

useImperativeHandle

useImperativeHandle：Можетпозволятьтысуществоватьиспользовать ref При настройке значения экземпляра, доступного родительскому компоненту

useImperativeHandle(ref, createHandle, [deps])

• ref：useRef所создаватьизref
• createHandle：иметь дело сизфункция,возвращатьсяценитьделатьдля暴露Давать父组кускииз ref объект.
• deps：Зависимости,Зависимости更изменять形成новыйиз ref объект.

❝useImperativeHandle иforwardRef配合использовать ❞

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

существовать父组кускисередина,Можетрендеринг<FancyInput ref={inputRef} />и Можетпроходить父组кускиизinputRefверноподкомпонентсерединаизinputруководитьиметь дело с。inputRef.current.focus()

useLayoutEffect

useLayoutEffect： иuseEffect基本один致,Когда в разных местах,**useLayoutEffectда同步**

хотеть УведомлениеиздаuseLayoutEffectсуществовать «После обновления DOM, до отрисовки браузером»,этот样Делатьиз好处да Может更加方便из修изменять ДОМ,возьми DOM информация,этот样浏览器只встреча绘制один次,так«useLayoutEf существует, выполняется до useEffect»

в случае useEffect изразговаривать ,useEffect "После выполнения существующего вида чертежа браузера,Если существует изменение DOM в это время,Это может привести к повторной перекомпоновке и перерисовке браузера».。

кромеuseLayoutEffectиз callback серединакод执行встреча«Блокировать рисование в браузере»

useDebugValue

useDebugValue：可использовать Всуществовать React Настройка отображения в инструментах разработчика hook из тега

Хуки в React v18

useSyncExternalStore

useSyncExternalStore:даодининдивидуальный推荐использовать Вчитатьи订阅外部данные源из hook,Его метод и селективность hydration Совместимость с разделением времени и другими функциями параллельного рендеринга.

const state = useSyncExternalStore(
    subscribe, 
    getSnapshot[, getServerSnapshot]
)

• subscribe: 订阅функция,Используется для регистрации функции обратного вызова,«Вызывается при изменении сохраненного значения»。также, useSyncExternalStore будет проводиться по памяти из getSnapshot 来判别данныеда否изменять,если произойдут изменения,那么встреча«Принудительное обновление данных»。
• getSnapshot: получается текущее сохраненное значение из функции. Должен появиться кэш из значения. если getSnapshot 连续много次调использовать,тогда должно получиться то же самое по точному значению,Если в середине нет сохраненного значения.
• getServerSnapshot：возвращаться Сервер(hydration模式Вниз)рендеринг期间использоватьизжить储ценитьизфункция

useTransition

useTransition：

• возвращатьсяодининдивидуальный«Значение статуса»выражать过渡任务изждатьсостояние,
• к及одининдивидуальный"Запустить задачу перехода из функции"。

«Переходная задача»существоватьодин些场景середина,Например: поле ввода, переключатель вкладок, кнопка и т. д.,Эти任务需хотеть视图上«Ответить немедленно»,Эти задачи можно вызвать для мгновенного возобновления задач.

Но иногда,возобновить Задача не такая уж и срочная,или Например, вам нужно запросить данные и т.д.,В результате новый статус невозможно сразу возобновить.,需хотетьиспользоватьодининдивидуальныйloading...изждатьсостояние,Такие задачи являются переборами

const [isPending, startTransition] = useTransition();

• isPending：«Переходное состояние из флага»,fortrue — это состояние ожидания
• startTransition：Может Волявиз Задача становится переходной задачей

useDeferredValue

useDeferredValue：приниматьодининдивидуальныйценить,ивозвращаться该ценитьиз«Новая копия»,Эта копия будет"откладывать"к более срочномувозобновлять之назад。

Если текущий рендеринг является индивидуальной чрезвычайной ситуацией, возобновить результат,Например, пользовательский ввод,React Воля「возвращаться Доизценить」,然назад「существоватьсрочныйрендеринг完成назадрендерингновыйизценить」。

То естьuseDeferredValueМожетпозволять«Вывод государственного лага»。

const deferredValue = useDeferredValue(value);

• value：переменнаяизценить,Например, useState создает значение
• deferredValue: Статус задержки

「useTransitionиuseDeferredValueДелатьиндивидуальныйверно比」

• такой же点：useDeferredValue и useTransition То же, это все переходные задачи
• другой点：useTransition Даватьиздаодининдивидуальный"состояние",иuseDeferredValueДаватьиздаодининдивидуальный"ценить"

useInsertionEffect

useInsertionEffect：и useLayoutEffect То же самое, но все это существует DOM 突变До«Синхронизированный триггер»

существуют исполнительный лист useInsertionEffect > useLayoutEffect > useEffect

❝seInsertionEffect должно быть ограничено css-in-js Используется авторами библиотеки. Расставьте приоритеты в использовании useEffect или useLayoutEffect заменить. ❞

useId

useId ： даодининдивидуальный«Используется для создания уникального идентификатора на сервере и клиенте, стабильно и стабильно» из同час避免hydrationнет совпаденийиз hook。

react-dom

createPortal

createPortal：существоватьPortalсерединапоставлять Понятноодин种Воляребенокузелрендерингприезжать DOM узелсерединаиз Способ,«Этот узел хранится вне компонента DOM из иерархии»。

То есть createPortal Может把当вперед组кускиилиelementэлементизребенокузел,рендеринг в другие места за пределами компонента.

Приходите и посмотритеcreatePortal(child, container)из Вход：

• дочерний элемент: любой элемент, который может быть дочерним
• контейнер: является элементом DOM

flushSync

flushSync：Может«Поместите функцию обратного вызова в задачу,Поставьте этому более высокий приоритет».,适использовать В«Принудительное обновление, гарантируя, что DOM будет обновлен немедленно»

 onClick={() => {
          this.setState({ number: 1  })
          this.setState({ number: 2  })
          this.setState({ number: 3  })
        }}

потому чтодляthis.setStateвстречаруководить«Пакетное обновление»,Таким образом, напечатанное из равно 3

onClick={() => {
      this.setState({ number: 1  })
      ReactDOM.flushSync(()=>{
        this.setState({ number: 2  })
      })
      this.setState({ number: 3  })
    }}

发сейчасflushSyncвстреча优先执行,Принудительное обновление,Таким образом, это изменит числовое значение для2,Затем 1и3существовать обновляется пакетно.,возобновлятьдля3

render

render：этотиндивидуальныйданассуществоватьReact-Domсередина最常использоватьизApi,использовать ВрендерингодининдивидуальныйРеагировать элементы

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

createRoot

существоватьReact v18середина,renderфункция已经被createRootзаменен на。

createRootвстреча控制тывходящийизконтейнерузелизсодержание。当调использовать render час,「виз任чтосейчасиметь DOM элементы будут заменены"。назад面из调использоватьиспользовать React из DOM diffing алгоритмруководитьиметь效возобновлять。

и createRoot «Не изменяйте узел контейнера»（只修изменятьконтейнеризребенокузел）。Можетсуществовать不覆盖сейчасиметьребенокузелиз情况Вниз Воля组куски插入сейчасиметь DOM узел.

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Main />
  </StrictMode>
);

unmountComponentAtNode

unmountComponentAtNode：从 DOM середина卸载组куски,встреча Воля其事кускииметь дело с器（event handlers）и state Очистите их все вместе. Если в указанном контейнере нет соответствующего смонтированного компонента, эта отдельная функция ничего не сделает.

• Если компонент будет удален, он появится true
• Будет ложным, если ни один компонент не может быть удален.

root.unmount()

unmountComponentAtNode такой жесуществоватьReact 18середина被替代Понятно,替换成ПонятноcreateRootсерединаизunmount()метод

const root = createRoot(container);
root.render(element);

root.unmount()

findDOMNode

findDOMNode：использовать В访问组кускиDOMэлементузел（план действий в чрезвычайной ситуации）,Официально рекомендуется использовать ссылку

unstable_batchedUpdates

unstable_batchedUpdates :可использовать В«Пакетное обновление вручную»state,Может指定многоиндивидуальныйsetState合идляодининдивидуальныйвозобновлятьпросить

постскриптум

«Поделиться – это отношение»。

«Весь текст окончен,Теперь, когда Видеть здесь,Если ты чувствуешь себя хорошо,Просто нажмитеиндивидуальныйхвалитьи“существоватьсмотреть”Бар。」