React 实战

原创

王秀龙

修改于 2021-08-27 11:14:56

1.2K0

文章被收录于专栏：云开发分享

一、React 视图层

项目创建

Create React App

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

JSX

基于 JS 的扩展语法

如何将 React 元素渲染到DOM中?

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

组件

React 应用组成和复用的基本单元

component = (props) => element

React组件必须像纯函数一样运行!

函数组件

import React from 'react';

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

export default Welcome;

类组件

必须有一个 render() 方法

import React from 'react';

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

export default Welcome;

列表中的 key

只需要保证，在同一个数组中的兄弟元素之间的 key 是唯一的。而不需要在整个应用程序甚至单个组件中保持唯一。

理想情况下，key 应该从数据中获取，对应着唯一且固定的标识符，例如 post.id。

state

只能在类组件中使用，组件内部的可变状态

创建 Clock 时钟组件

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;

setState 注意事项

不能通过 this.state 直接赋值

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

使用 this.setState 方法赋值

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

setState 对 state 的修改是部分修改，而不是对整个 state 全量替换

state 总结

Props：父组件传递给子组件的属性，在子组件内部只读
State：组件内部自己维护的状态，可以被修改

生命周期方法

针对类组件是有意义的，而函数组件没有这些生命周期方法

Form

受控组件

input 的值受 react 组件控制

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;

React Hooks

React 16.8 以后，新的组件开发方法

React Hooks 编写形式对比

先来写一个最简单的组件，点我们点击按钮时，点击数量不断增加。

有状态组件写法：

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;

React Hooks 写法

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;

State Hook

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

Effect Hook

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();
    }, [])

其它 Hooks API

二、React Router 路由层

路由分类

1.服务端路由

请求发送到服务端，服务端返回对应的页面内容

2.客户端路由

请求不发送到服务端，有客户端代码更新页面内容

MPA 和 SPA

React Router是什么

React 应用中的客户端路由解决方案

基础示例

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

Router

browserrouter：根据 URL 中的 path 做路由跳转

HashRouter：根据 URL 中的 hash 部分做路由

Route

当 url 和 Route 中定义的 path 匹配时,渲染对应的组件

重要 props：path、exact

Switch

当找到Switch组件内的第一个路由规则匹配的Route组件后,立即停止后续的查找

路由跳转

声明式的组件方式：Link

命令式的 API 调用方式：history.push

Hooks

useHistory：获取 history 对象

useParams：获取路由中的参数

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

登录后参与评论

0 条评论

热度

React 实战

React 实战

一、React 视图层

项目创建

JSX

组件

生命周期方法

Form

组件的组合用法

React Hooks

二、React Router 路由层

路由分类

React Router是什么

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐