React

Hook是React16.8的新增特性。它可以让我们在不使用类语法（class）的情况下编写有状态组件（Stateful Component）。

Hook将React哲学（显式数据流和组合）引入到组件内部，而不仅仅是组件之间。使用这一方案可以让组件内部的代码逻辑更为清晰条理化。

下面首先通过对class组件的改造来了解Hook的适用法。

首先是一个简单的SubmitButton组件：

import React, { Component } from "react"; export default class SubmitButton extends Component { constructor(props) { super(props); this.state = { text: "click me!" }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(() => { return { text: "loading..." }; }); setTimeout(() => { this.setState(() => ({text: "submited!"})) }, 3000); } render() { const { text } = this.state; return (<button onClick={this.handleClick}>{text}</button>); } }

SubmitButton组件，通过自己的state管理显示文本。

import React, { Component } from 'react'; import Button from "./SubmitButton" class FormComponent extends Component {

state = {
name: 'honwlee',
age: 33
}

handleNameChange = (firstName) => {
this.setState({ firstName })
}

handleLastNameChange = (lastName) => {
this.setState({ lastName })
}
handleAgeChange = (age) => {
this.setState({ age })
}
onSubmit = (e) => {
e.preventDefault();
}

render () {
return (
<React.Fragment>
<form>
<input
name="name"
type="text"
onChange={(e) => this.handleNameChange(e.target.value)}
value={this.state.name}
/>

<input name="age" type="number" onChange={(e) => this.handleAgeChange(e.target.value)} value={this.state.age} /> <Button></Button> </form> </React.Fragment> )

}
};
export default FormComponent;