如何在状态更改时停止ReactJS组件重新呈现

Question

I have a form with some input fields (some of them hidden until a checkbox is checked. When I check/uncheck the checkbox a specific state is set ( this.state.isChecked = true/false ).

On render method, i have a div (containing some input fields) with some classes and this condition for "show" class: <div className={'extra-fields ' + (this.state.isChecked? ' show' : '')}>...</div>

Expected behavior is that on state change, only the "show" class is putted or deleted from div Current behavior: the entire form is rendered again and all data written in the input fields are lost.

How it should be done this?

Answer 1

If the value of the input fields is important (which they apparently are), and if they can change (which the obviously can), then React should be aware of them, typically in state.
The 'standard' (on only) react way to maintain the contents of the input fields is:

• put the content of the input fields in state as well,
• include something like value={this.state.foo} and onChange={this._onChange()} to the render of each input field
• include the _onChange() function to the form to handle input changes

That way, whenever the form is re-rendered (after each setState() ), the input values are also preserved.

PS: The question title "stop reactjs component from rerender on state change" does not really cover the question from text: you are asking for a partial re-render: do re-render the show/hide extra fields based on checkbox, but do not re-render input fields.

Answer 2

The short answer is that you can prevent a component from rendering/updating with the shouldUpdateComponent life-cycle event: https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

However, I agree with the previous answer, that for the sake of doing what sounds like a partial re-render, and to follow best practices in general, you should be storing the state of your input fields somewhere in a component so that they persist beyond a render call.