Государственный минимализм в React

Что такое лазейка? Если закон не наказывает за определенное действие или не облагает налогом определенную вещь, это не лазейка. Это просто закон. — Людвиг фон Мизес

React предлагает в основном два типа компонентов

Компонент
Чистый компонент

React.PureComponentотрисовывается только в том случае, если между предыдущим и текущим рендерингом есть какое-либо изменение состояния или свойств. лазейка заключается в том, что React.Componentотрисовывается, если вызывается setState. Он никогда не будет проверять изменения состояния или реквизита.

Что насчет этого?

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

Традиционный подход

class Conventional extends React.Component{
    constructor(props){
        super(props);
        this.state={
            name:'ryan'
        }
        this.handleChange=this.handleChange.bind(this)
    }
    handleChange(){
        this.setState({
            name:'jordan',
        })
    }
    render(){
        return(
            <div onClick={this.handleChange}>
                {this.state.name}
            </div>
        )
    }
}

Государственный минималистский подход

class StateMinimalism extends React.Component{
    constructor(props){
        this.state={
            _:''
        }
        this.name='ryan';
        this.handleChange=this.handleChange.bind(this)
    }
    renderComp(){
        this.setState({
            _:''
        })
    }
    handleChange(){
        this.name='jordan';
        this.renderComp();
    }
    render(){
        return(
            <div onClick={this.handleChange}>
                {this.name}
            </div>
        )
    }
}

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

this.setState({
_:''
})

Он отобразит компонент со всеми внесенными в него изменениями. Приведенный выше подход State Minimalistic может показаться немного большим с точки зрения длины кода по сравнению с обычным традиционным подходом. Поскольку данные становятся огромными, этот подход будет иметь наименьшую длину кода.

Традиционный подход против государственного минималистичного подхода

Задержка при установке состояния

Большинство разработчиков React используют обратные вызовы для использования недавно установленных состояний. Это запаздывание наблюдается только при настройке состояний, тогда как переменные класса сохранят значение, как только оно будет назначено.

Традиционный подход 1 – обратный вызов

handleChange(){
    this.setState({
        name:'dahl',
    }=>{
        this.initiateMail();
    })
}
initiateMail(){
    // this.state.name
}

Традиционный подход 2 — изменение передается в качестве аргумента

handleChange(){
    this.setState({
        name:'dahl',
    });
    this.initiateMail('dahl');
}
initiateMail(name){
   // name
}

Государственный минималистский подход

handleChange(){
    this.name='dahl'
}
initiateMail(){
    //this.name
}

2. Нежелательный рендеринг

В приведенном выше примере традиционного подхода компонент будет отображаться так, как мы вызвали setState. Таким образом, присвоение значений состоянию через setState приведет к отображению компонента. Иногда такое отображение будет ненужным или неожиданным. Это ненужное отображение можно предотвратить только с помощью явно обрабатывая его в хуке shouldComponentUpdate. Но если мы выбираем подход State Minimalistic, нам не нужно беспокоиться о ненужном рендеринге.

Традиционный подход

handleChange(){
    this.setState({
        name:'dahl',
    }=>{
        this.initiateMail();
    })
}
initiateMail(){
    // this.state.name
    //Logic Here
    //Setting state if any
}

Государственный минималистский подход

handleChange(){
    this.name='dahl'
}
initiateMail(){
    //this.name
    //Logic Here
    renderComp();
}
renderComp(){
    this.setState({
        _:''
    })
}

3. Настройка сложного объекта сложна

Традиционный подход

constructor(props){
    super(props);
    this.state={
        details:{
            personal:{
                name:'',
                age:40
            }
        }
    }
}
changeAge(newAge){
    let details=this.state.details;
    details.personal.age=newAge;
    this.setState({
        details
    })
}

Государственный минималистский подход

constructor(props){
    super(props);
    this.details={
        personal:{
            name:'',
            age:40
        }
    }
}
changeAge(newAge){
    this.details.personal.age=newAge;
    this.renderComp();
}

Заключение

Хотя некоторые могут счесть подход State Minimalistic анти-шаблоном, он значительно сократит код и позволит избежать ненужного рендеринга. Это также помогает разработчикам понимать, как происходит рендеринг и, что более важно, лучше контролировать его. Большинство разработчиков могут использовать этот подход наряду с традиционным подходом.

Подход State Minimalistic просто использует доступную лазейку для улучшения.

Государственный минимализм в React

Что насчет этого?

Похожие вопросы