Если функции рендеринга должны быть чистыми, то как представление может быть изменено в зависимости от состояния?

Я новичок реагировать и, проходя через учебники, я нашел это,Если функции рендеринга должны быть чистыми, то как представление может быть изменено в зависимости от состояния?

«Рендер() функция должна быть чистой, а это означает, что она не изменяет состояние компонента, она возвращает тот же результат каждый раз это вызывается, и он не взаимодействует напрямую с браузером ». - https://facebook.github.io/react/docs/react-component.html#reference

Я немного смущен этим. Если функция рендеринга должна возвращать одинаковый результат каждый раз, как я могу изменить отображение на основе состояний?

Например, у меня есть текст с кнопкой редактирования. Когда я нажимаю на редактирование, текстовое поле должно появляться с текстом и изменять изменения кнопки для сохранения.

источник

2016-12-30 Jithu Rajan

Я думаю, что рендер является функцией компонента вида mvc. Модель и контроллер можно модифицировать с помощью флюса или редукции. Короче: Начните с состояния по умолчанию/Model => дайте представление состояние и состояние генерирует html => пользователь щелкает что-то, поэтому view создает действие => действие обрабатывается хранилищем (flux/redux), а обработчик действий возвращает новое состояние => новое state дается view => ... – HMR

Функция рендеринга всегда должна возвращать тот же результат для состояния * current *. Функция рендеринга в основном является функцией, которая принимает текущее состояние как аргумент (и на самом деле это то, что делают компоненты без гражданства). –

http://www.slideshare.net/nikgraf/react-redux-introduction slide 33 – HMR

Функция рендеринга должна быть чистой, что означает, что она не изменяет состояние компонента, она возвращает тот же результат при каждом вызове и не взаимодействует напрямую с браузером ». - https://facebook.github.io/react/docs/react-component.html#reference

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

Примечание: setState ожидает, что состояние будет инициализировано первым. getInitialState является функцией для тех же и приведенных в примере ниже

например.

var firstName = 'Anand'; 
 
var testExample = React.createClass({ 
 
    getDefaultProps: function() { 
 
     return { 
 
      name: 'React', 
 
      message: 'This is the default message!' 
 
     }; 
 
    }, 
 
    getInitialState: function() { 
 
     return { 
 
      name: this.props.name 
 
     }; 
 
    }, 
 
    handleNewName: function (name) { 
 
     this.setState({ 
 
      name: name 
 
     }); 
 
    }, 
 
    render: function() { 
 
     var name = this.state.name; 
 
     var message = this.props.message; 
 

 
     return (
 
      <div> 
 
       <h1>{message}</h1> 
 
       <h2>{name}</h2> 
 
      </div> 
 
     ); 
 
    } 
 
});

Внутри функции handleNewName мы изменили состояние, которое затем используется в визуализации. Надеюсь, это поможет

источник

2016-12-30 05:47:36

Если функции рендеринга должны быть чистыми, то как представление может быть изменено в зависимости от состояния?

ответ

Смежные вопросы