React从入门到实战- 企业级实战项目-宜居三

2019年最新 React从入门到实战（带 React 企业级实战项目-宜居）

(React Hook新特性&)

React Hook新特性&

(1.React 新特性 State Hook&)

1.React 新特性 State Hook&

App.js

import React from 'react';
import Demo1 from "./components/Demo1"
import Demo2 from "./components/Demo2"
import User from "./components/Demo3/User"
import Token from "./components/Demo3/Token"
import TodoList from "./components/Demo4/TodoList"
import Demo5 from "./components/Demo5"
import Demo6 from "./components/Demo6"
import Demo7 from "./components/Demo7"
import Demo8 from "./components/Demo8"
import Demo9 from "./components/Demo9"
import Demo10 from "./components/Demo10/MemoDemo"
import Demo11 from "./components/Demo11"
import Demo12 from "./components/Demo12"
import Demo13 from "./components/Demo13/MainPage"
import Demo14 from "./components/Demo14"
import Demo15 from "./components/Demo15"

function App() {
    return (
        <div className="App">
            {/* <Demo1 /> */}
            {/* <Demo2 /> */}
            {/* <User /> */}
            {/* <Token /> */}
            {/* <TodoList /> */}
            {/* <Demo5 /> */}
            {/* <Demo6 /> */}
            {/* <Demo7 /> */}
            {/* <Demo8 /> */}
            {/* <Demo9 /> */}
            {/* <Demo10 /> */}
            {/* <Demo11 /> */}
            {/* <Demo12 /> */}
            {/* <Demo13 /> */}
            {/* <Demo14 /> */}
            <Demo15 />
        </div>
    );
}

export default App;

Demo1.jsx

Hook创建component，useState

import React,{ useState } from "react"

// export default class Demo1 extends React.Component{

//     state = {
//         count:0
//     }

//     render(){
//         return(
//             <div>
//                 Hello:{ this.state.count }
//             </div>
//         )
//     }
// }

export default () =>{

    /**
     * count:状态
     * setCount:setState -> setCount修改状态
     * useState(0):默认值
     */
    const [count,setCount] = useState(10);
    const [page,setPage] = useState(0);

    return(
        <div>
            Hello:{ count } - { page }
            <button onClick={ () =>{ setCount(count+1) } }>Add</button>
        </div>
    )
}

(2.React 新特性 Effect Hook&)

2.React 新特性 Effect Hook&

Demo2.jsx

useEffect，componentDidUpdate

// import React from "react"

// export default class Demo2 extends React.Component{

//     state = {
//         count:0
//     }

//     componentDidMount(){
//         document.title = `You clicked ${this.state.count} times`
//     }

//     componentDidUpdate(){
//         document.title = `You clicked ${this.state.count} times`
//     }

//     render(){
//         return(
//             <div>
//                 Hello:{ `You clicked ${this.state.count} times` }
//                 <button onClick={ () =>{ this.setState({count:this.state.count+=1}) } }>Add</button>
//             </div>
//         )
//     }
// }

import React,{ useState,useEffect } from "react"

export default () =>{

    const [count,setCount] = useState(0);

    /**
     * useEffect：
     *      componentDidMount
     *      componentDidUpdate
     *      componentWillUnmount
     */
    useEffect(() =>{
        document.title = `You clicked ${count} times`
    })

    return(
        <div>
            Hello:{`You clicked ${ count } times`}
            <button onClick={ () =>{ setCount(count+1) } }>Add</button>
        </div>
    )
}

(3.新特性 State Hook 和 Effect Hook实例应用&)

3.新特性 State Hook 和 Effect Hook实例应用&

User.jsx useState代替事件

// import React from "react"

// const userSet = ["张三","李四","王五","赵刘"]

// export default class UserGenerator extends React.Component{

//     state = {
//         user:userSet[0]
//     }

//     generateUser = () =>{
//         let randomIndex = Math.floor(Math.random() * userSet.length);
//         let randomUser = userSet[randomIndex]

//         this.setState({
//             user:randomUser
//         })
//     }

//     render(){
//         return(
//             <div>
//                 <span>{ this.state.user }</span>
//                 <button onClick={ this.generateUser }>切换</button>
//             </div>
//         )
//     }
// }


import React, { useState } from "react"

const userSet = ["张三", "李四", "王五", "赵刘"]

const UserGenerator = () => {

    const [user, setUser] = useState(userSet[0])

    const generateUser = () => {
        let randomIndex = Math.floor(Math.random() * userSet.length);
        let randomUser = userSet[randomIndex]
        setUser(randomUser)
    }

    return (
        <div>
            <span>{user}</span>
            <button onClick={generateUser}>切换</button>
        </div>
    )
}

export default UserGenerator

Token.jsx

sessionStorage读取token，ref非受控组件

import React,{useState,useEffect } from "react"

class TokenForm extends React.Component{

    handlerSubmit = event =>{
        event.preventDefault();
        // 数据来源于props
        const { setToken } = this.props;
        const token = this.tokenInput.value;
        if(token){
            setToken(token)
        }
    }

    render(){
        return(
            <form onSubmit={ this.handlerSubmit }>
                <input type="text" name="token" placeholder="enter your token" 
                    ref={ input => { this.tokenInput = input }}
                />
            </form>
        )
    }
}

// export default class TokenApp extends React.Component{

//     state = {
//         token:null
//     }

//     componentDidMount(){
//         // 数据存在本地
//         this.setState({token:sessionStorage.getItem("token")});
//     }

//     setToken = token =>{
//         sessionStorage.setItem("token",token);
//         this.setState({token})
//     }

//     render(){

//         const { token } = this.state;

//         return(
//             <div>
//                 <h1>Hello</h1>
//                 { token ? token : <TokenForm setToken={ this.setToken }/> }
//             </div>
//         )
//     }
// }

const TokenApp = () =>{
    const [token,setToken] = useState(sessionStorage.getItem("token"))
    
    useEffect(() =>{
        sessionStorage.setItem("token",token);
    })

    return(
        <div>
            <h1>Hello</h1>
            { token ? token : <TokenForm setToken={ setToken }/> }
        </div>
    )
}

export default TokenApp

(4.React 新特性 自定义 Hook TodoList&)

4.React 新特性 自定义 Hook TodoList&

TodoList.jsx 数组合并方法

import React,{useState} from "react"
import TodoForm from "./TodoForm"

const TodoList = () =>{

    /**
     * todolist是一个列表：数组
     */

    const [todos,setTodos] = useState([]);

    function setValue(text){
        // 数组的合并
        /**
         * a = [1,2,3]
         * b = [4,5,6]
         * c = 7;
         * [...a,...b,c]
         */
        setTodos([{ text },...todos]);
    }

    return(
        <div>
            <TodoForm onSubmit={ setValue }/>
            <div>
                {
                    todos.map((element,index) =>{
                        return <div key={index}>{ element.text }</div>
                    })
                }
            </div>
            <button onClick={ () =>{ setTodos([])} }>clear</button>
        </div>
    )
}

export default TodoList

TodoForm.jsx 三点读取数据

// import React,{ useState } from "react"

// const TodoForm =() =>{
//     const [value,setValue] = useState("")

//     return(
//         <div>
//             <input type="text" value={ value } onChange={ (e) =>setValue(e.target.value) }/>
//         </div>
//     )
// }

// export default TodoForm

//  https://github.com/rehooks/awesome-react-hooks

import React, { useState }  from "react";

const useInputValue = (initialValue) => {
    const [value,setValue] = useState(initialValue);

    return{
        value,
        onChange:e => setValue(e.target.value),
        resetValue:() => setValue("")
    }
}

const TodoForm =({ onSubmit }) =>{
    const {resetValue , ...text} = useInputValue("");

    function onSubmitHandler(e){
        e.preventDefault();
        onSubmit(text.value);
        resetValue(); // 清空输入框
    }

    return(
        <form onSubmit={ onSubmitHandler }>
            <input type="text" { ...text }/>
        </form>
    )
}

export default TodoForm

创建hook输入框

(5.React 新特性 Hook Effect 性能优化&)

5.React 新特性 Hook Effect 性能优化&

componentDidUpddate优化

// import React from "react"

// export default class Demo5 extends React.Component{

//     state = {
//         count:0,
//         name:"iwen"
//     }

//     componentDidMount(){
//         document.title = `you clicked ${this.state.count} times`;
//     }

//     componentDidUpdate(prevProps,prevState){
//         if(prevState.count !== this.state.count){
//             console.log("触发");
//             document.title = `you clicked ${this.state.count} times`;
//         }
//     }

//     clickCountHandler = () =>{
//         this.setState({
//             count:this.state.count+1
//         })
//     }

//     clickNameHandler = () =>{
//         this.setState({
//             name:"ime"
//         })
//     }

//     render(){
//         return(
//             <div&