React Virtual DOM, Events, and Forms

[zxw018018]

Virtual DOM

• A data structure stored by React that tracks changes from one render state to the next
• If something has changed from one render to the next, the browser's DOM is update (Reconciliation)

Synthetic Events

Supports all the native browser events, but provides a consistent API on all browsers

Events

bond function

class ClickExample extends Component {
    constructor(props) {
        super(props);
        this.state = {name: "tim"};
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(e) {
        this.setState((prevState, props) => ({
            name: prevState.name.toUpperCase()
        });
    }
    render() {
        return (
            <div>
                <p>{this.state.name}</p>
                <button type="button" onClick={this.handleClick}>
                    UPPERCASE
                </button>
            </div>
        );
    }
}

inline calbacks

render() {
    return (
        <div>
            <p>{this.state.name}</p>
            <button type="button"
                onClick={() => this.setState({name: "TIM"})}>
                UPPERCASE
            </button>
        </div>
    );
}

Form

<form onSubmit={(e) => {
    e.preventDefault();
    const data = [...this.state.data, this.state.inputText];
    this.setState({data, inputText: ''});
}}>
    <input
        type="text"
        name="inputText"
        value={this.state.inputText}
        onChange={(e) => {
            this.setState({[e.target.name]: e.target.value})        
        }}
    />
</form>

refs

• A direct reference to a DOM element

Use Cases

• Managing focus, text selection, or media playback
• Triggering imperative animations
• Integrating with third-party DOM libraries