React中受控與非受控組件

時間 2019-11-16

標籤 react 受控組件欄目 React 简体版

原文原文鏈接

首次發表在我的博客react

受控組件

<input
    type="text"
    value={this.state.value}
    onChange={(e) => {
        this.setState({
            value: e.target.value.toUpperCase(),
        });
    }}
/>

<input>或<select>都要綁定一個change事件;每當表單的狀態發生變化,都會被寫入組件的state中,這種組件在React中被稱爲受控組件;在受控組件中,組件渲染出的狀態與它的value或者checked prop向對應.react經過這種方式消除了組件的局部狀態,是的應用的整個狀態可控.react官方一樣推薦使用受控表單組件,總結下React受控組件更新state的流程:架構

1.能夠經過初始state中設置表單的默認值;
2.每當表單的值發生變化時,調用onChange事件處理器;
3.事件處理器經過合成事件對象e拿到改變後的狀態,並更新應用的state.
4.setState觸發視圖的從新渲染,完成表單組件值得更新

react中數據是單向流動的.從示例中,咱們能看出來表單的數據來源於組件的state,並經過props傳入,這也稱爲單向數據綁定.而後,咱們又經過onChange事件處理器將新的表單數據寫回到state,完成了雙向數據綁定.性能

非受控組件

若是一個表單組件沒有value props(單選按鈕和複選按鈕對應的是 checked props)時,就能夠稱爲非受控組件;
使用defaultValue和defaultChecked來表示組件的默認狀態;
經過 defaultValue和defaultChecked來設置組件的默認值,它僅會被渲染一次,在後續的渲染時並不起做用

import React, { Component } from 'react';

class UnControlled extends Component {
    handleSubmit = (e) => {
        console.log(e);
        e.preventDefault();
        console.log(this.name.value);
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" ref={i => this.name = i} defaultValue="BeiJing" />
                <button type="submit">Submit</button>
            </form>
        );
    }
}

export default UnControlled;

對比受控組件和非受控組件

將輸入的字母轉化爲大寫展現this

<input
    type="text"
    value={this.state.value}
    onChange={(e) => {
        this.setState({
            value: e.target.value.toUpperCase(),
        });
    }}
/>

直接展現輸入的字母code

<input
    type="text"
    defaultValue={this.state.value}
    onChange={(e) => {
        this.setState({
            value: e.target.value.toUpperCase(),
        });
    }}
/>

1.性能上的問題

在受控組件中,每次表單的值發生變化,都會調用一次onChange事件處理器,這確實會帶來性能上的的損耗,雖然使用費受控組件不會出現這些問題,但仍然不提倡使用非受控組件,這個問題能夠經過Flux/Redux應用架構等方式來達到統一組件狀態的目的.orm

2.是否須要事件綁定

使用受控組件須要爲每個組件綁定一個change事件,而且定義一個事件處理器來同步表單值和組件的狀態,這是一個必要條件.固然,某些狀況能夠使用一個事件處理器來處理多個表單域對象

import React, { Component } from 'react';

class Controlled extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            name: 'xingxing',
            age: 18,
        };
    }
    handleChange = (name, e) => {
        const { value } = e.target;
        this.setState({
            [name]: value,
        });
    }
    render() {
        const { name, age } = this.state;
        return (
            <div>
                <input type="text" value={name} onChange={this.handleChange.bind(this, 'name')} />
                <input type="text" value={age} onChange={this.handleChange.bind(this, 'age',)} />
            </div>
        );
    }
}

export default Controlled;