带有React组件的表单

Question

I want to create a form with React. I came up with the following:

export class Welcome extends Component {

    constructor(props) {
        super(props);
        this.state = {
            errors: []
        };
    }

    render() {
        return (
            <form className="Welcome">
                <div className="hello">{ this.props.sayHello() } I'm <Link to="/life">Marco</Link>! Welcome to my hood.</div>
                <div className="question-box">
                    <div className="question"><span className="underline" >How much time do you have?</span></div>
                    <input className="minutes" type="text" value={this.props.minutes}
                           onChange={ (e) => this.props.updatePreferences("minutes", e.target.value) }/> minutes. 
                </div>
                <div className="question-box">
                    <div className="question"><span className="underline">What do you fancy?</span></div>
                    <div className="answer">
                        <span className="choice">
                            <input type="checkbox" id="business" defaultChecked={ this.props.interests.business }/>
                            <label htmlFor="business">Business</label>
                        </span>
                        <span className="choice">
                            <input type="checkbox" id="code" defaultChecked={ this.props.interests.code }/>
                            <label htmlFor="code">Code</label>
                        </span>
                        <span className="choice">
                            <input type="checkbox" id="design" defaultChecked={ this.props.interests.design } />
                            <label htmlFor="design">Design</label>
                        </span>
                    </div>{/* end of .answer*/}
                  </div>{/* end .question-box*/}
                <button>Show me magic</button>
                <div className="errors">
                    No error. All good.
                </div>
            </form>
        );
    }
}

The onChange functions are in the parent component which also holds the state. But every time they are called the whole component is reloaded. Should the whole form be on a separate component or I should create separate components for each input?

Answer 1

React call render function in response of state change. So if component does not receive state change event it most probably will not rerendered but not necessarily. It may rernder anyway. ref