• React 72 0 1 发布

    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}
    />

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

    }
    };
    export default FormComponent;

热门总结

  • React 72 0 1 发布

    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}
    />

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

    }
    };
    export default FormComponent;