javascript - react : Will a state change cause an entire component to be redrawn?

Question

我正在react中创建一个具有条件流的表单。例如，当选择某些选择选项时，两个输入字段可能会被隐藏。基于选择选项创建状态并使输入元素的可见性取决于当前状态是一个好主意吗？或者我应该向输入元素添加引用，并使选择引发一个更改事件，该事件将用于操纵输入的可见性？

Answer 1

除非您有任何复杂的逻辑来决定是否绘制输入，否则我认为将其简单地与某个状态变量联系起来是完全可以的，甚至是鼓励的。这是使用 Reacts 双向绑定(bind)插件的示例:

var MyForm = React.createClass({
    mixins: [React.addons.LinkedStateMixin],

    getInitialState: function() {
        return {hasName: false};
    },

    render: function() {
        var nameInput = null;
        if (this.state.hasName) {
            nameInput = <label>
                Name:
                <input type="text" />
            </label>;
        }

        return <form>
            <label>
                <input type="checkbox" checkedLink={this.linkState('hasName')} />
                Do you have a name?
            </label>
            <br/>
            {nameInput}
       </form>;
    }
});

React.render(<MyForm/>, document.body);

http://jsfiddle.net/p4u1qhym/

当你使用事件处理程序时，你仍然应该为输入设置一个状态变量:即使 React 足够智能，可以在重新渲染期间保持任何 DOM 状态完整(例如 visibility 样式)选项)，它并不总是有效。例如，想象一下这样的情况:您序列化表单状态并希望稍后使用它来初始化另一个表单。 React 将无法推断不应显示名称输入并呈现它。

但是，仍然存在使用 this.refs 很有用的情况，例如将焦点设置为特定输入时，如 here 中所述。 .

从你的问题标题来看，我假设你担心性能:是的，整个组件将被重新渲染，但仅限于虚拟 DOM。然后，React 会找到与实际 DOM 的所有差异，并仅应用两者匹配所需的更改。您可以阅读here 。由于整个过程非常高效，因此使用 this.refs 在实际 DOM 节点上设置某些样式属性在性能上几乎没有差异。而且它的冗长程度要低得多!