React：状态变化会导致整个组件重绘吗？

Question

我正在 React 中创建一个具有条件流的表单。 For example two input fields might be hidden when some select option is chosen.基于 select 选项创建状态并使输入元素的可见性取决于当前状态是否是个好主意。或者我应该将 refs 添加到输入元素并使 select 引起一个更改事件，该事件将用于操纵输入的可见性？

Answer 1

除非您有任何复杂的逻辑来决定是否绘制输入，否则我认为将其简单地绑定到某个状态变量是完全可以的，甚至是鼓励的。这是一个使用 Reacts two-way 绑定插件的示例：

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 足够聪明，可以在 re-rendering 期间保持任何 DOM 状态完整（例如 visibility 样式选项），它并不总是有效。想象一下这样一种情况，您序列化表单状态并希望稍后使用它来初始化另一个表单。 React 将无法推断不应该显示输入的名称，并对其进行渲染。

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

从你的问题标题来看，我假设你担心性能：是的，整个组件将是 re-rendered，但仅在 虚拟 DOM.然后 React 找到与实际 DOM 的所有差异，并仅应用两者匹配所需的更改。你可以阅读它 here。由于整个过程非常高效，因此在实际 DOM 节点上使用 this.refs 设置某些样式属性在性能上应该几乎没有差异。而且它不那么冗长！

React：状态变化会导致整个组件重绘吗？

React: Will a state change cause an entire component to be redrawn?

javascript

reactjs

reactive-programming