Когда я начал учиться реагировать, просматривал все документы и прочее. Это напугало меня до текучести! : P Но, как только я понял, что это за flux, стало не страшно! Эта история для тех, кто учится реагировать, таких как я! Вот так,
1. Жизненный цикл
В любой структуре MVC, основанной на компонентах, первое, что нужно изучить, - это жизненный цикл компонента.
Совет №1. Сохраняйте простоту конструктора ()
Как вы знаете, constructor()
- первый чувак, который запускает компонент. Этот чувак также отвечает за запуск визуализации представления. Если представление отображается без каких-либо задержек, оно кажется быстрым. Итак, используйте конструктор только для объявлений var в состоянии или для импорта свойств и т. Д. То, что предназначено для запуска, как только компонент будет смонтирован, можно поместить в componentDidMount()
Совет №2 shouldComponentREALLYupdate ()?
Иногда компонент не требует повторного рендеринга при получении определенных свойств. shouldComponentUpdate()
по умолчанию возвращает true. Но мы можем настроить функцию в компоненте и сделать так, чтобы этот парень не всегда возвращал true.
Eg:
shouldComponentUpdate(nextProp){ if(nextProp == 'Not the guy deserving to update the comp'){ return false; } return true; }
2. Привязка ввода с состоянием
Как мы знаем, привязку ввода к состоянию можно выполнить, запустив setState (), инициированный onChange prop входного JSX-компонента. Согласно документации React, они предлагают иметь функцию onChange для каждого ввода (отдельно).
Из документов,
<input onChange={this.handleWhenDudeChanges.bind(this)} value={this.state.dude}/>
и
handleWhenDudeChanges(event){ this.setState({ dude:e.target.value }); }
Но вот совет!
Совет №3 Одна общая функция onChange - name на помощь
Используйте свойство name из функции ввода и получите общую функцию onChange для всех композиций ввода.
нравится!
<input value={this.state.dudeOne} name=”dudeOne” onChange={this.handleAllDudes.bind(this)}/> <input value={this.state.dudeTwo} name=”dudeTwo” onChange={this.handleAllDudes.bind(this)}/>
и…
handleAllDudes(event){ this.setState({ [e.target.name]:e.target.value }); }
3. «Это» внутреннее обещание
‘This’ теряет свою область видимости внутри функции обратного вызова обещания, когда используется как this: P,
someHonestPromise .then(function(dudeee){ console.log(this.state.someVar); //--> here 'this' is lost })
Совет №4. Используйте стрелочные функции, чтобы сохранить область видимости.
Стрелочные функции связывают обратные вызовы внутренних функций с областью компонента, так что this больше не undefined.
например., вышеприведенное обещание можно переписать как
someSuperHonestPromise .then((dude)=>{ console.log(this.state.someVar); //--> Here 'this'makes sense })
4. Инъекция зависимости, братан!
Если вы разработчик angular, то DI - это любовь . Официально реакция на DI не дается, но вы можете создать свой собственный DI. Его ES6 ребенок!
Совет № 5 Внедрение сервисов в компоненты
Инъекция - это не что иное, как импорт обычно используемых функций или общих функций из отдельного служебного файла.
Для примера, axios - это библиотека AJAX, используемая для реакции. Мы можем создать службу (DI), которая выполняет все необходимые вызовы AJAX в приложении. Эти функции (из службы) запускаются компонентами по мере необходимости.
Переходя к коду,
app / services / axiosService.js
import axios from 'axios'; var axiosService = { getMe, postMe }; function getMe(){....} function postMe(){...} export default axiosService;
приложение / компоненты / someAwesomeComponent
import axiosService from '../services/axiosService'; .... export default class someAwesomeComponent extends React.component{ .... axiosService.getMe(); <---- getMe() func is used here from service .... }
5. Действие + Редуктор → РЕАКЦИЯ!
У React есть единый источник истины для всего приложения для любой информации. Каково состояние приложения. Действия - это простые объекты js, которые говорят о том, что что-то произошло, редукторы - это функции, которые реагируют на изменение состояния приложения соответствующим образом.
Совет № 6 Action-Reducer для хранения глобальных переменных в приложении
Например, после входа в систему пользовательские данные (из localstorage) могут быть отправлены в состояние, подобное этому,
userAction.js
export const USER_INFO=’USER_INFO’; export function getUserInfo(info) { return dispatch => { return dispatch({ type: USER_INFO, info} )} }
userReducer.js
import { USER_INFO} from ‘./userAction’ export default function userReducer(state = { info: {}}, action){ switch (action.type) { case USER_INFO: return { info: action.info }; default: return state } }
login.js (после входа в систему и получения данных пользователя)
store.dispatch(userReducer(info)); //this copies info to app state
Теперь информация о пользователе находится в состоянии приложения! ЙОЛО! Но вопрос в том, как использовать данные, которые находятся в состоянии приложения? А вот и connect от react-redux.
Это похоже на…
import {connect} from ‘react-redux’; ... class SomeCompNeedsUserInfo extends React.Component{ ... //this.props.user_info is mapped from state's user_info } mapStateToProps = (state) => {state.user_info} export default conenct (mapStateToProps) (SomeCompNeedsUserInfo)
Вывод
Эта статья призвана помочь новичкам и учащимся отреагировать на разработку правильного программирования.
Есть легендарная кодировка: P