об обновлении реквизита в ReactJS

Существует несколько сообщений в SO, связанных с невозможностью обновления реквизита в ReactJS. Например. this one.об обновлении реквизита в ReactJS

В ссылочного посте дается объяснение, что это является частью философии ReactJS, помогает при отладке и т.д. Также this answer (в том же потоке) показывает, как это делается в ReactJS (с помощью Object.freeze).

Я ReactJS новичка и так собрать этот маленький пример, чтобы попытаться увидеть, что происходит, когда один пытается изменить реквизит (также в jsfiddle)

<!doctype html> 
<html> 
    <body> 
    <div id='react-app'></div> 
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script> 
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script> 
    <script type='text/javascript'> 
    var rce = React.createElement.bind(React); 
    var TodoList = React.createClass({ 
     propTypes: { 
     todos: React.PropTypes.arrayOf(React.PropTypes.string).isRequired, 
     }, 
     render: function() { 
     var props = this.props; 
     var todos = this.props.todos; 
     var self = this; 
     return rce('div', {} 
        ,rce('ul', {} 
         , (function(){ 
         return todos.map(function(x, i) { 
          return rce('li', {key: i}, x); 
         });})()) 
      ,rce('button', {onClick: function() { 
       // delete props.todos;   // fails 
       // props.todos = [];   // fails 
       todos.splice(0, todos.length); // succeeds 
       console.log(todos); 
       self.forceUpdate(); 
      }}, 'clear all')); 
     } 
    }); 
     var todoList = rce(TodoList, {todos: ['walk dog', 'feed cat', 'water flowers']}); 
     ReactDOM.render(todoList, document.getElementById('react-app')); 
    </script> 
    </body> 
</html>

Я уверен, что приведенный выше код нарушает многие хороших практик, но очевидно, легко изменить props. Я понимаю, это потому, что Object.freeze вызывается на объекте props, а не на его свойствах, а также он не «замирает» от сращивания (или изменения значений атрибута объекта реквизита). Мои вопросы:

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

источник

2016-03-03 Marcus Junius Brutus

Согласно react философии, рекомендуется не редактировать реквизита, потому что это не так, как react является дизайн (Thinking in React).

Вы должны использовать state своего вида, который соответствует изменениям, и вы можете передать некоторые данные от state до props.

увидеть правильный пример кода:

var TodoList = React.createClass({ 
    propTypes: { 
    todos: React.PropTypes.arrayOf(React.PropTypes.string).isRequired, 
    onSomeAction: React.PropTypes.func.isRequired 
    }, 


    render: function() { 
    var todos = this.props.todos; 
    var self = this; 
    return rce('div', {} 
       ,rce('ul', {} 
        , (function(){ 
        return todos.map(function(x, i) { 
         return rce('li', {key: i}, x); 
        });})()) 
     ,rce('button', {onClick: this.props.onSomeAction}); 
    } 
});

Логик, что и как нужно делать, когда кнопка нажата, должно быть место в владельце зрения, если только вы не управлять вами собственным государство в Текущий вид.

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

Надеюсь, что это будет ясно ...

источник

2016-03-03 17:30:23

об обновлении реквизита в ReactJS

ответ

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