defaultValue in React

overview

在React中，提供了受控和非受控两种方式来操作input的value，提供非受控方式的意义在于提供了一个能直接操作底层DOM的接口，那么React提供defaultValue的意义是什么呢

sense of defaultValue

我们知道defaultValue是用来设置非受控input的默认值，那么我们先来思考，没有defaultValue这个API，我们要如何实现给非受控的input设置默认值

set default value for uncontrol input

我们要设置非受控input的值，那么就需要操作DOM，就需要在组件挂载到DOM的时候才能去操作，也就是在lifecyclecomponentDIdMount中来操作

class MyComponent extends Component {
    componentDidMount() {
        this.input.value = 'default value'
    }
    render() {
        return <input ref={input => this.input = input} />
    }
}

CONS

其实就是操作了一次DOM，如果能在组件挂载到DOM之前就设置好value就能避免了一次DOM的操作

const inputElement = document.createElement('input')
inputElement.setAttribute('value', 'hello')
document.body.appendChild(inputElement)

conclusion

所以React之所以提供defaultValue这个API，一方面是提供便利的API让开发者避免去手动设置，避免模版代码，另一方面，在挂载到DOM之前就设置好input的值也能减少一次DOM的操作提高性能