Когда я начал учиться реагировать, просматривал все документы и прочее. Это напугало меня до текучести! : 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