задний план
1. Реагировать на серию
Позвольте мне сначала представить предысторию, стажировка начинается2021.3месяц писалvue. Измененный新窝После этого я в основном использую реакцию, и, конечно же, также использую vue, который больше подходит для H5.
Начиная с записи, серия реакций будет учиться и писать, начиная с基础 -> hooks -> 源码 -> 面试题И так далее, я также напишу о процессе собственного преображения.
Соответствующий код будет находиться на следующем 👇🏻 складе, пожалуйста, начните.
2. Личный блог
Первый личный блог, Все заметки о личном изучении и совместном использовании различных внешних ресурсов, заинтересованный брат может взглянуть, это легкоstartСледующий.
Если вы хотите создать подобный блог, в блоге также есть учебные пособия, которые полностью бесплатны от начала до конца. В блоге есть публичная учетная запись, и вы можете присоединиться к нам, учиться бить каждый день и добиваться прогресса вместе!
1. Жизненный цикл
Диаграмма жизненного цикла React
Я уже отпечатал эту картинку в своем сознании, я просто рисую ее сам, когда мне нечего делать, и раскидываю посередине какие-то свои мысли. u1s1, я не знаю, как долго называется жизненный цикл реакции~~~, Небольшие программы, Vue относительно короткие. Ведь частота использования все равно очень высока, если не считать Хуков.
1, конструктор
Конструктор — это конструктор общего назначения для класса, который часто используется для инициализации и является частью жизненного цикла. Компоненты класса также могут быть опущены в более поздних версиях React.
Примечание: при использовании в конструктореsuperключевое слово будет отображаться отдельно, и必须В использованииthisключевое слово, использованное ранее. Ключевое слово super также может использоваться для вызова функций родительского объекта.Описание MDN
class JJTest extends React.Component {
// constructor 写法
constructor(props) {
super(props);
this.state = {
count: 0,
};
this.handleClick = this.handleClick.bind(this);
}
// 直接声明
state = {
count: 0,
};
}
2. получить производное состояние из пропса
Время запуска:state 变化、props 变化、forceUpdate, как показано выше.
Это статический метод, роль которого "не связана" с самим компонентом. В этом статическом методе, в дополнение к двум позиционным параметрам по умолчанию nextProps и currentState, вы无法访问данные о любом компоненте.
// 初始化/更新时调用
static getDerivedStateFromProps(nextProps, currentState) {
console.log(nextProps, currentState, "getDerivedStateFromProps方法执行");
// 返回值是对currentState进行修改
return {
fatherText: nextProps.text,
};
}
3. визуализировать
Структура JSX, возвращаемая функцией рендеринга, используется для описания конкретного содержимого рендеринга. Когда вызывается рендеринг, он проверяет изменения в this.props и this.state и возвращает один из следующих типов:
-
React 元素. Обычно создается через JSX. Например,будет отображаться React как узел DOM, будет отображаться React как пользовательский компонент, независимо от того,Тем не менее все элементы React. -
数组或 fragments. Заставляет метод рендеринга возвращать несколько элементов. Дополнительные сведения см. в документации по фрагментам. -
Portals. Может отображать дочерние узлы в разные поддеревья DOM. Подробнее см. в документации по порталам -
字符串或数值类型. Они отображаются как текстовые узлы в DOM. -
布尔类型或 null. Ничего не визуализируется. (В основном используется для поддержки шаблонов, возвращающих test &&, где test — логическое значение.)
Примечание. Если функция shouldComponentUpdate() возвращает false, функция render() вызываться не будет.
Для хуков не нужно писать функцию рендеринга. Следует отметить, что хотя хукам не нужно писать рендеринг,
React.xxx не используется, он по-прежнему требуется в компонентеimport React from "react";(Что касается причины, я узнаю больше о хуках в будущем, и мой старший брат также может объяснить это). Представители React также заявили, что в последующих версиях это будет оптимизировано.
4. КомпонентДидМаунт
В основном он используется для выполнения определенных операций при загрузке компонента, таких как инициирование сетевых запросов или событий привязки. Его можно использовать в качестве монтирования vue, на что следует обратить внимание:
SetState() вызывается непосредственно в componentDidMount(). Это вызовет дополнительный рендер, то есть два рендера, но это не большая проблема, главное понимать.
5. Обновить компоненты
Этот метод возвращаетtrueилиfalseчтобы определить, нужно ли запускать новый рендеринг. Поскольку рендеринг запускает последний уровень, также性能优化поле битвы. Предотвратите ненужный рендеринг, добавив условия оценки. Уведомление:首次渲染или использоватьforceUpdate()не будет вызывать этот метод.
React официально предоставляет общее решение для оптимизации, котороеPureComponent. Основной принцип PureComponent заключается в реализации функции shouldComponentUpdate по умолчанию, в которой выполняются реквизиты и состояние.浅比较, используемый для определения необходимости запуска обновления.
Конечно, PureComponent также имеет缺点Да, вы должны быть внимательны при его использовании: поскольку выполняется поверхностное сравнение, может быть выдано неправильное отрицательное суждение из-за несоответствия глубоких данных, что приведет к тому, что страница得不到更新. Не подходит для использования в содержащих多层嵌套对象в состоянии и реквизит.
shouldComponentUpdate(nextProps, nextState) {
// 浅比较仅比较值与引用，并不会对 Object 中的每一项值进行比较
if (shadowEqual(nextProps, this.props) || shadowEqual(nextState, this.state) ) {
return true
}
return false
}
6. getSnapshotBeforeUpdate
в Доме更新前вызывается, возвращаемое значение будет использоваться как третий параметр componentDidUpdate.
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log("getSnapshotBeforeUpdate方法执行");
return "componentDidUpdated的第三个参数";
}
7. КомпонентДидОбновление
Этот метод не выполняется при первом рендеринге. Вы можете использовать setState, который вызовет повторный рендеринг, но будьте осторожны, чтобы избежать бесконечных циклов.
componentDidUpdate(preProps, preState, valueFromSnapshot) {
console.log("componentDidUpdate方法执行");
console.log("从 getSnapshotBeforeUpdate 获取到的值是", valueFromSnapshot);
}
8. КомпонентWillUnmount
В основном используется для отвязки некоторых событий, очистки ресурсов и т. д., таких как отмена таймеров, отписка событий
резюме
Жизненный цикл нужно хорошо понимать, его нужно писать и смотреть на результаты выполнения жизненного цикла в каждом конкретном случае. В приведенном выше кодеРепозиторий React-TypeScriptЕсть вообще, можно клонировать и бежать смотреть, или посетить напрямуюЖизненный цикл системы обучения Junjie. Есть и другие жизненные циклы,componentDidCatch, UNSAFE_componentWillMount()Подождите, это легко понять.
2. JSX
1. Круговой список
В jsx карта обычно используется для рендеринга классов цикла списка, в vue вы можете напрямую написать v-for в шаблоне.
{
list.map((item, index) => {
return <AppCard key={index} title={item.title} onClick={item.onClick} />;
});
}
2. Стиль
(1)className
Можно написать класс в одиночку, динамическая склейка требует помощиclassnamesбиблиотека
import style from './style.css'
<div className={style.class1 style.class2}</div>
(2)style
Примечание: две круглые скобки (стили анализируются как объект), атрибуты стиля, такие как -connection, необходимо преобразовать в маленький верблюжий регистр.
<div style={{ marginTop: 8 }}>样式</div>
(3) изоляция CSS
u1s1, изоляцию css по-прежнему легко использовать с областью видимости vue.
-
css-module
Create-react-app имеет встроенную конфигурацию с использованием CSS-модулей, которая похожа на принцип области действия vue, поскольку к сгенерированному классу добавляется хеш-значение.
// style.module.css
.text {
color: blue
}
// app.tsx
import s from "./style.module.css";
class App extends Component {
render() {
return <div className={s.text}>css-module text</div>;
}
}
// 编译后
.text_3FI3s6uz {
color: blue;
}
-
styled-components
Самый популярный в сообществе
CSS in JSПлан лично мне немного неудобен, мне он не очень нравится
//引入styled-components
import styled from "styled-components";
//修改了div的样式
const Title = styled.div`
font-size: 30px;
color: red;
`;
class App extends Component {
render() {
return (
<>
<Title>CSS in JS 方案</Title>
</>
);
}
}
3. JSX
Будет немного неудобно переходить с vue в начале (проще говоря, сколько людей пишут JSX прямо в vue), раньше я пользовался Vue Sfc, конечно, буду знаком с ним, если буду писать дальше. Что касается преимуществ и недостатков React с использованием JSX, в области комментариев есть свои мнения.
Предварительный просмотр соответствующей страницы кода
render() {
return (
<>
<Alert title="控制台展示父子组件生命周期的过程" />
<div className="fatherContainer">
<Button onClick={this.changeText} type="primary">
修改父组件文本内容
</Button>
<Button onClick={this.hideChild} type="danger">
{this.state.hideChild ? "显示" : "隐藏"}子组件
</Button>
{this.state.hideChild ? null : (
<LifeCycle text={this.state.text} count={1} />
)}
</div>
<div>
<BlockLoading loading={this.state.loading} iconSize={64} />
<iframe
src={this.state.lifeCycle}
title="navigation"
width="100%"
height="600px"
onLoad={this.onLoading}
onError={this.onLoading}
></iframe>
</div>
</>
);
}
3. Основные компоненты
С точки зрения компонентов, разница между личным ощущением и vue все еще относительно велика, степень детализации более детальна, и, конечно, это также увеличивает определенную степень сложности. Вот простой пример версии TS,带 Icon 的标题组件
import cn from "classnames";
import React from "react";
import "./style/index.less";
import { Icon,IIconProps } from "zent";
interface IProps {
title: string;
iconType?: IIconProps['type'];
isShowIcon?: boolean;
iconClassName?: string;
titleClassName?: string;
}
export const ContentTitle: React.FC<IProps> = (props) => {
const { title, iconType = 'youzan', isShowIcon = false , iconClassName, titleClassName, ...popProps } = props;
return (
<div className={cn("content-title", titleClassName)}>
{title}
{isShowIcon && <Icon
className={cn("content-title__icon", iconClassName)}
{...popProps}
type={iconType}
/>}
</div>
);
};
export default ContentTitle;
В-четвертых, компоненты высокого уровня HOC
1. Значение
а такжеvue mixinsто же, все решить代码复用Однако от примесей отказались в react, и их не рекомендуется использовать в vue.
в основном приносит命名冲突，相互依赖，不方便维护и т.д. некоторые недостатки.
Компоненты более высокого порядка фактически имеют дело с реагирующими компонентами.函数, простое понимание состоит в том, что это похоже на экспорт/импорт, предусмотренный в ES6, разница заключается в следующем:
Компоненты более высокого порядка будут делать加工后Затем экспортируйте то, что вам нужно. Аналогично уравнению:y = ax + b, x — это запись (компонент), которая будет вычисляться в соответствии с a и b, чтобы получить окончательный y (обработанный компонент), который вы можете использовать.
2. Демо
Реализация Демо официального сайта:компоненты более высокого порядка
Простой компонент высшего порядка (реализуемый двумя способами: прокси свойства и обратное наследование):
// 属性代理: 组件属性的一些修改
const JJHOC = (WrappedComponent) => {
return class NewComponent extends React.Component {
render() {
const newProps = { type: "HOC" };
return <WrappedComponent {...this.props} {...newProps} />;
}
};
};
// 反向继承: 在render() 方法中返回 super.render() 方法
const JJHOC = (WrappedComponent) => {
return class NewComponent extends WrappedComponent {
render() {
return super.render();
}
};
};
3. Общий HOC
- react-router withRouter: может получить историю, некоторую информацию о маршрутизации
- redux connect подключает компоненты React к хранилищу Redux и монтирует методы отправки к компонентам.
5. Коммуникация компонентов
1. реквизит
В отличие от vue, свойства реакции могут передавать значения直接写, декларация не требуется. монтировать на реквизитfunction, что эквивалентно vue$emit.
Также обратите внимание, что подкомпоненты не могут修改 propsзначение
import React from "react";
function Child(props) {
const sendMsg = (msg) => {
props.onClick("子组件的消息");
};
return (
<div>
<div>子组件标题：{props.title}</div>
<button onClick={() => sendMsg("子组件消息")}> 子传父 </button>
</div>
);
}
function Father() {
const onClick = (msg) => {
console.log(`父组件接收：${msg}`);
};
return (
<div>
<Child title="组件props传值测试" onClick={onClick}></Child>
</div>
);
}
export default Father;
2. контекст
Описание официального сайта React Context, передавать значения по компонентам. Создается контекст, и компоненты внутри этого контекста могут быть Используйте данные со значением через Provider
import * as React from "react";
import { Button } from "zent";
// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“primary”为默认值）。
const ThemeContext = React.createContext("primary");
export default class App extends React.Component {
render() {
// 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
// 无论多深，任何组件都能读取这个值。
// 在这个例子中，我们将 danger 作为当前的值传递下去。
return (
<ThemeContext.Provider value="danger">
<Toolbar />
</ThemeContext.Provider>
);
}
}
// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
class ThemedButton extends React.Component {
// 指定 contextType 读取当前的 theme context。
// React 会往上找到最近的 theme Provider，然后使用它的值。
// 在这个例子中，当前的 theme 值为 “danger”。
static contextType = ThemeContext;
render() {
return <Button type={this.context}>context测试</Button>;
}
}
3. Редукс
Три ядра редукции:
- действие: действие можно назвать действием, описывающим событие, которое будет запущено.
- состояние: единственный источник правды для хранения наших данных.
- редуктор: измените значение состояния, инициировав события действия.
Вам не обязательно использовать его, достаточно многих контекстов проекта
(1) Крепление
использоватьcreateStoreСоздайте магазин и пройдитеProviderпоместите его в компонент контейнера
// index.js
const store = createStore(appReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root");
);
(2) Метод создания и модификации
Подобно vuex, как черезactionизменить данные
// action.js
export const addConst = (payload) => {
type: "ADD_CONST",
}
export const minusConst = (payload) => {
type: "MINUS_CONST",
}
(3) Создать коллекцию магазина
Когда диспетчеризация запускает соответствующий метод, выполняет соответствующую операцию и изменяет данные хранилища.
// appReducer.js
const initialState = { count: 0 };
const reducer = (state = initialState, action) => {
switch (action.type) {
case "ADD_CONST":
return { count: count + 1 };
case "MINUS_CONST":
return { count: count - 1 };
default:
return state;
}
};
export default reducer;
(4) Положение использования Redux в компонентах
import React from "react";
import { connect } from "react-redux";
const ReduxDemo: React.FC = (props) => {
const addCount = () => {
const { dispatch } = props;
dispatch({
type: "ADD_CONST",
});
};
const minusCount = () => {
const { dispatch } = props;
dispatch({
type: "MINUS_CONST",
});
};
return (
<div>
<button onClick={addCount}>加</button>
<button onClick={minusCount}>减</button>
<div>{props.state}</div>
</div>
);
};
const mapStateToProps = (state) => {
return {
count: state.count,
};
};
export default connect(mapStateToProps)(ReduxDemo);
6. Проверка компонентов
Официальный сайт React использует PropTypes для проверки типовReact props объявлять не обязательно, но если проект стандартизирован, то нужно объявить тип props в propTypes, обратите внимание на необходимость введенияprop-typesбиблиотека
Но теперь это большеtypescriptПриходите проверить тип, и проблема может быть найдена в стадии разработки.
import * as React from "react";
import PropTypes from "prop-types";
interface IProps {
name: string;
}
const PropsDemo: React.FC<IProps> = ({ name }) => {
return <h1>Hello, {name}</h1>;
};
PropsDemo.propTypes = {
name: PropTypes.string,
};
7. Реагирующий маршрутизатор
- Официальный сайт React Routerанглийская версия
- Документация React Router на китайском языкепо моему не ясно написано
1. Обратите внимание
- react-router: реализует основные функции маршрутизации.React-router версии 3.x также включает в себя метод операционного dom, который недоступен в 4.x и выше.
- react-router-dom: основанный на react-router, он добавляет некоторые функции в рабочую среду браузера, такие как: компонент Link, который будет отображать тег, исходный код компонента Link в строке тега; компоненты BrowserRouter и HashRouter, прежние использует pushState и событие popState строит маршрут, который использует события window.location.hash и hashchange для построения маршрута.
- react-router-native: основан на react-router, похож на react-router-dom, добавляя некоторые функции в реактивную операционную среду.
2. Демонстрация
import React, { Component } from "react";
import Admin from "./pages/admin/admin";
import Login from "./pages/login/Login";
import { HashRouter, Route, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<HashRouter>
<Switch>
<Route path="/" component={Admin}></Route>
<Route path="/login" component={Login}></Route>
</Switch>
</HashRouter>
);
}
}
export default App;
3. Параметры маршрутизации
(1) Пармы
// router
<Route path='/path/:id' component={Path}/>
// 传参
<link to="/path/789">xxx</Link>
this.props.history.push({pathname:`/path/${id}`});
// 获取
this.props.match.params.id
(2) запрос
// router
<Route path='/query' component={Query}/>
// 传参
<Link to={{ path : '/query' , query : { id : '789' }}}>xxx</Link>
this.props.history.push({pathname:"/query",query: { id : '789' }});
// 获取
this.props.location.query.id
(3) Крючки
// 跳转
let history = useHistory();
history.push("/");
// 获取
useLocation();
useParams();
useRouteMatch();
4. точный атрибут
Точный — это атрибут в разделе "Маршрут". Вообще говоря, реагирующая маршрутизация будет соответствовать всем совпадающим ценам группы маршрутизации, точное может сделать сопоставление маршрутов более строгим.
Точное значение равно bool, true для строгого соответствия и false для нормального соответствия.
Например, '/link' и '/' не совпадают, когда точное значение равно true, но совпадают, когда оно ложно.<Route path="/home" component={Home} exact></Route>
8. Резюме
Изучив жизненный цикл, больше попрактиковавшись в JSX и написав больше компонентов с помощью React Router и Redux, вы можете начать разработку. Существует не так уж много API для изучения, и их можно написать относительно бесплатно.
Хотя React является экологически мощным и имеет множество опций, это создает проблему:什么是 React 的最佳实践？
Наконец, я все же рекомендую некоторые учебные ресурсы, давайте работать вместе!
- Vue to React не совсем на севереРанее я писал статью и сравнивал vue и react в целом.
- Реагировать на дизайн-мышлениеОдин вопрос: почему React не предоставляет некоторые API, такие как Vue?
- Серия учебных пособий по стеку технологий ReactУчебное пособие Ruan Da React по экологии немного устарело
- React вводный пример учебникаПродукция Ruan Yifeng должна быть превосходной!
- Самородки Реагируют ПопулярноЕсть много статей от больших парней, вы можете прочитать
- 34 навыка, которыми должен обладать React-разработчик [почти 1 Вт слов]Связанные с навыками, вы можете связаться с базовой частью, чтобы попробовать
- [Углубленное реагирование] От Mixin до HOC и HookЭволюция повторного использования кода