предисловие
Это более подробная статья, объясняющая React, и в ней много базовых знаний, надеюсь, вы сможете изучить их самостоятельно. Полный текст начинается с наиболее распространенного эффекта загрузки в бизнес-разработке, которым является внедрение, и рассказывает о том, что должна иметь в виду разработка интерфейса в бизнесе.
операция начального уровня
State
В самой простой реализации мы объявляем состояние внутри компонента Loading и оцениваем отображение эффекта загрузки с помощью логики кода.
export default class extends Component {
...
render() {
return this.state.loading ? <div className="loader" /> : <div>finish</div>;
}
}
Props
С развитием бизнеса этот компонент загрузки будет использоваться во многих местах.Приведенный выше код сочетает в себе много логики.Чтобы сделать этот компонент многоразовым, мы извлечем бизнес-логику компонента и выполним внутреннее состояние. Обновите, тогда этот компонент является компонентом пользовательского интерфейса, который можно использовать повторно.
export default function(props) {
return props.loading ? <div className="loader" /> : <div>finish</div>;
}
Примечание: приведенные выше два фрагмента кода вы можете подумать, почемуFuncа такжеClassМожет реализовать компонент, в чем разница между ними?
На самом деле вам нелегко почувствовать разницу во время разработки, но сам React внес много изменений в обработку.Если это класс Class, React будет использоватьnewсоздание экземпляра ключевого слова, затем вызовите экземпляр экземпляраrenderметод, если это функция Func, React вызовет ее напрямую.
Refs
Если вы являетесь разработчиком React, преобразованным с помощью jQuery, естественно думать, что я нахожу узел компонента «Загрузка» и управляю его отображением и скрытием.Конечно, это также возможно.React предоставляет ссылки, чтобы облегчить вам доступ к узлам DOM или Реагировать на элементы.
export default class extends Component {
componentDidMount() {
fetch().then(() => {
this.el.changeLoading(false);
});
}
render() {
return (
<Loading ref={el => { this.el = el; }} />
);
}
}
общая логическая абстракция
Когда ваше приложение достигает определенной сложности, различные страницы будут иметь эффект загрузки.Вы определенно не хотите повторять одну и ту же логику на каждой странице, что сделает ваш код повторяющимся и запутанным.
В React есть еще два распространенных решенияHOCа такжеRender Props, на самом деле эти два понятия не зависят от React.
Давайте на мгновение забудем о React, вот мое мнениеHOCа такжеRender PropsНапишите два примера, и вы обнаружите, что повторное использование компонентов очень просто.
HOC
На самом деле HOC — это шаблон декоратора, который принимает компонент в качестве параметра и возвращает тот же компонент, так что вы можете добавить некоторые дополнительные функции.
const func = () => {
console.log("func");
};
const wrap = func => {
console.log("wrap");
return func;
};
// wrap 逻辑已被复用
wrap(func)();
Render Props
Render Props означает, что мы передаем функцию обратного вызова в качестве параметра функции, и функция обратного вызова может использовать результат выполнения внешней функции в качестве параметра для выполнения любой операции.
const func = param => {
console.log("func");
};
const wrap = (param, func) => {
console.log("wrap");
func(param);
};
// wrap 逻辑已被复用
wrap("", func);
Тот же пункт:
- Оба могут нам очень хорошо помочь
重用组件逻辑; - Подобно функции обратного вызова, когда имеется много уровней вложенности, это вызовет
回调地狱.
разница:
- HOC и родительский компонент имеют один и тот же переданный атрибут имени атрибута, что приведет к потере атрибута;
- Для Render Props вам нужно только создать экземпляр промежуточного класса, а для HOC вам нужно создать дополнительный промежуточный класс каждый раз, когда вы его вызываете.
В общем, когда необходимо повторно использовать логику компонента, лично я предпочитаю путь Render Props.
Комплексное государственное управление
Когда ваше приложение становится больше и взаимодействие между компонентами становится все более и более сложным, логика данных всей страницы становится трудноуправляемой.В это время, чтобы управлять состоянием приложения, вы можете выбрать некоторые инструменты управления состоянием , Такие какRedux,Flux,dvaЖдать.
Redux
Я действительно не хочу говорить об этих структурах потоков данных из-за их концепций.action,store,dispatchСлишком наивно, чтобы понять.
Современные интерфейсные фреймворки React и Vue на самом деле являются рутиной: они пытаются отображать данные через данные, а затем оперируют представлением, обновляя данные по очереди, повторно отображая представление и обновляя страницу.
данные называютсяstore, действие называетсяation, поведение триггера называетсяdispatch, тогда рендеринг данных в представлении обрабатывается React/Vue.
(картинка изздесь)
// reducers.js
const initialState = {
loading: false
};
export default function reducer(state = initialState, action) {
switch (action.type) {
case "CHANGE_LOADING":
return {
loading: action.payload
};
default:
return state;
}
}
Saga
Когда в вашем коде много асинхронных операций, таких как запросы на выборку, вы обязательно подумаете事件监听,回调函数,发布/订阅.
Ну, последний пример на самом деле事件监听метод обработки, затем回调函数Основным решением являетсяredux-thunk,а также发布/订阅Основным решением являетсяsaga.
import { takeLatest, put } from "redux-saga/effects";
import fetch from "./fetch";
function* fetchInfo(action) {
yield put({
type: "CHANGE_LOADING",
payload: true
});
yield fetch();
yield put({
type: "CHANGE_LOADING",
payload: false
});
}
export default function* fetchSaga() {
yield takeLatest("FETCH_REQUEST", fetchInfo);
}
Когда вы терпеливо видите это, я знаю, что у вас должен быть некоторый опыт работы с React, и вы можете многое сделать сейчас, например, поднять состояние загрузки в начало Магазина, тогда у всего сайта будет только одна загрузка, а затем вы может получить, а затем инкапсулировать HOC для изменения состояния загрузки - относительно идеальная загрузка Фактически, бизнес-разработка React может использовать эту процедуру.
новый API
Context
Является ли приведенный выше пример с редуксом слишком сложным? Для простого бизнеса, хотя страниц много и уровень вложенности очень сложный, можно конечно не использовать инструменты управления состоянием, можно попробовать использовать Context, который может облегчить вам передачу данных, что на самом деле является реализацией Render Реквизит.
export default React.createContext({
loading: false,
changeLoading: () => {}
});
Hooks
Написал это, это тихо, не то, что я делаю не так?
Мой бизнес просто хочет написать простой эффект загрузки, но понять концепцию множества жизненных циклов компонентов.
Хуки просто решают эту проблему за вас.Хуки позволяют вам использовать функциональность React в функциях, выполняя единственный вызов функции, позволяя вам поместить面向生命周期编程стали面向业务逻辑编程.
import React, { useState, useEffect } from "react";
import Loading from "./Loading/index";
import fetch from "./fetch";
function App() {
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch().then(() => {
setLoading(false);
});
}, []);
return <Loading loading={loading} />;
}
export default App;
подвести итог
Каждый пункт был специально реализован выше, но они не изолированы.Вы можете резюмировать и абстрагировать свою собственную методологию в соответствии с вашими когнитивными и деловыми характеристиками;
多了解,多抽象,多思考, практикуйте восемнадцать боевых искусств, и когда вы столкнетесь с проблемами, вы сможете делать это с легкостью;
React рекламируется все больше и больше вещей, вам лучше сначала понять их, затем использовать критический взгляд, быть в здравом уме и не позволять себе каждый день рефакторить собственный код с очень новыми функциями.
Справочная статья
Реагировать на официальный сайт
Когда я узнаю, что готов к Redux?
Статья может быть воспроизведена по желанию, но просьба сохранитьОригинальная ссылка.
Добро пожаловать!ES2049 Studio, отправьте свое резюме на caijun.hcj(at)alibaba-inc.com.