React 实战

npx create-react-app my-app
cd my-app
npm start	/	yarn start

const element = <h1>Hello，world</h1>;
ReactDOM.render(element,document.getElementById('root'))

component = (props) => element

import React from 'react';

function Welcome(props) {
    return <h1>Hello, {props.name} </h1>
}

export default Welcome;

import React from 'react';

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name} </h1>
    }
}

export default Welcome;

import React, { Component } from 'react';

class Clock extends Component {
    constructor(props) {
        super(props);
        this.state = { date: new Date() };
    }

    // 组件被挂载到 DOM 节点时会调用
    componentDidMount() {
        // setInterval 循环任务 API
        this.timerID = setInterval(() => this.tick(), 1000);
    }

    // 组件从 DOM 卸载时会调用
    componentWillUnmount() {
        // 清除 setInterval 创建的定时任务
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }

    render() {
        return (
            <div>Current Time：{this.state.date.toLocaleTimeString()} </div>
        );
    }
}

export default Clock;

// Wrong 
this.state.comment = 'Hello';

// Correct
this.setState({comment: 'Hello'});

// Wrong
this.setState({
	counter: this.state.counter + this.props.increment
})

// Correct
this.setState((state, props) => ({
	counter:satae.counter + props.increment
}))

import React, { Component } from 'react';

class NameForm extends Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ value: event.target.value })
    }

    handleSubmit(event) {
        alert('A name was submitted：' + this.state.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit} >
                <label>
                    Name:
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

export default NameForm;

import React, { Component } from 'react';

class NameForm extends Component {
    constructor(props) {
        super(props);

        this.handleSubmit = this.handleSubmit.bind(this);
        this.input = React.createRef();
    }

    handleSubmit(event) {
        alert('A name was submitted：' + this.input.current.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit} >
                <label>
                    Name:
                    <input type="text" ref={this.input} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

export default NameForm;

import React from 'react';

function FanctBorder(props) {
    return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
            {props.children}
        </div>
    )
}

function WelcomeDialog() {
    return (
        <FanctBorder color="blue">
            <h1 className="Dialog-title"> Welcome </h1>
            <p> Thank you for visiting our spacecraft! </p>
        </FanctBorder>
    )
}

export default WelcomeDialog;

import React from 'react';

function FanctBorder(props) {
    return (
        <div>
            <div>{props.left}</div>
            <div><h3> this is line! </h3></div>
            <div>{props.right}</div>
        </div>
    )
}

function Left(props) {
    return (
        <div>
            <p> this is a Left! </p>
        </div>
    )
}

function Right(props) {
    return (
        <div>
            <p> this is a Right! </p>
        </div>
    )
}

function WelcomeDialog() {
    return (
        <FanctBorder left={<Left />} right={<Right />} />
    )
}

export default WelcomeDialog;

import React, { Component } from 'react';

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
        this.addCount = this.addCount.bind(this)
    }
    render() {
        return (
            <div>
                <button type="button" onClick={this.addCount}>
                    count is: {this.state.count}
                </button>
            </div>
        );
    }

    addCount() {
        this.setState({
            count: this.state.count + 1
        })
    }
}

export default Example;

import React, { useState, useEffect } from 'react';

function Example() {
    const [count, setCount] = useState(0)

    useEffect(() => {
        console.log(`useEffect=> You clicked ${count}`);
        return () => {
            console.log('解绑生命周期函数！')
        }
    }, [count]) // count 发生变化，就会执行解绑


    return (
        <div>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                count is: {count}
            </button>
        </div>
    )
}

export default Example;

const [state, setState] = useState(initialState);

useEffect(() =>{ effectFn(); return clearFn},[...dependencies])

useEffect(() => {
        const getUserInfo = async () => {
            try {
                const userInfo = await fetch('https://api.github.com/users/hzjsj');
                console.log(userInfo)
            } catch (err) {
                console.error(err)
            }
        }
        getUserInfo();
    }, [])

import React from "react";
import {
    BrowserRouter as Router,
    // HashRouter as Router,
    Switch,
    Route,
    Link,
    useHistory,
    useParams
} from "react-router-dom";

export default function BasicExample() {
    return (
        <Router>
            <div>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                    <li>
                        <Link to="/dashboard">Dashboard</Link>
                    </li>
                </ul>

                <hr />

                <Switch>
                    <Route exact path="/">
                        <Home />
                    </Route>
                    <Route path="/about">
                        <About />
                    </Route>
                    <Route path="/dashboard">
                        <Dashboard />
                    </Route>
                    <Route path="/user/:username">
                        <User />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

// You can think of these components as "pages"
// in your app.

function Home() {
    const history = useHistory();
    return (
        <div>
            <h2>Home</h2>
            <button
                onClick={() => {
                    history.push("/user/jason");
                }}
            >
                Go User{" "}
            </button>
        </div>
    );
}

function About() {
    return (
        <div>
            <h2>About</h2>
        </div>
    );
}

function Dashboard() {
    return (
        <div>
            <h2>Dashboard</h2>
        </div>
    );
}

function User() {
    const params = useParams();
    const username = params.username;
    return <div>Welcome: {username}</div>;
}