ReactJS - ли сделать вам вызвать в любой момент "выполнении функция setState" называется?

реагирует ли рендеринг всех компонентов и субкомпонентов каждый раз setState называется?

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

в следующем простом примере оба класса снова отображаются при щелчке текста, несмотря на то, что состояние не изменяется при последующих щелчках, так как обработчик onClick всегда устанавливает state к тому же значению:

this.setState({'test':'me'});

Я бы ожидалось, что рендеры будут происходить только если state сведения изменились.

вот код для примера как скрипка JS, и встроенный фрагмент:

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
[1]: http://jsfiddle.net/fp2tncmb/2/

2 ответов


React повторно отображает все компоненты и подкомпоненты каждый раз, когда вызывается setState?

по умолчанию - да.

есть метод boolean shouldComponentUpdate (объект nextProps, объект nextState), каждый компонент имеет этот метод, и он отвечает за определение " должен обновить компонент (run оказатьгосударство или пройти новый реквизит от родителей деталь.

вы можете написать свою собственную реализацию shouldComponentUpdate метод для вашего компонента, но реализация по умолчанию всегда возвращает true-то есть всегда повторно запускает функцию рендеринга.

цитата из официальных документов http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

по умолчанию, shouldComponentUpdate всегда возвращает true для предотвращения тонкие ошибки, когда состояние мутировал на месте, но если вы будете осторожны, чтобы Всегда рассматривайте состояние как неизменяемое и считывайте только из реквизита и состояния в render () вы можете переопределить shouldComponentUpdate с помощью реализация, которая сравнивает старые реквизиты и состояние с их замены.

Следующая часть вашего вопроса:

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

есть два шага то, что мы можем назвать "рендер":

  1. виртуальный рендер DOM: когда оказать метод называется он возвращает новый виртуальный дом структура компонента. Как я уже упоминал, это оказать метод вызывается всегда, когда вы называете выполнении функция setState(), потому что shouldComponentUpdate всегда возвращает true по умолчанию. Таким образом, по умолчанию в React нет оптимизации.

  2. родной DOM render: React изменяет реальные узлы DOM в вашем браузере, только если они были изменены в виртуальном DOM и так мало, как это необходимо - это отличная функция React, которая оптимизирует реальную мутацию DOM и заставляет реагировать быстро.


нет, React не отображает все при изменении состояния.

  • всякий раз, когда компонент загрязнен (его состояние изменено), этот компонент и его дочерние элементы повторно отображаются. Это, в какой-то степени, для того, чтобы перерисовывать как можно меньше. Единственный раз, когда рендеринг не вызывается,-это когда какая-то ветвь перемещается в другой корень, где теоретически нам не нужно ничего рендерить. В вашем примере, TimeInChild является дочерним компонентом Main, поэтому он также повторно отображается, когда состояние Main изменения.

  • React не сравнивает данные состояния. Когда setState - Это называется, он помечает компонент как "грязный" (что означает, что он должен быть повторно вынесено). Важно отметить, что хотя render вызывается метод компонента, реальный DOM обновляется только в том случае, если выходные данные отличаются от текущего дерева DOM (a.к. различие между виртуальным деревом DOM и деревом DOM документа). В вашем примере, хотя state данные не изменено, время последнего изменения, что делает виртуальный DOM отличным от DOM документа, поэтому HTML обновляется.