1.渲染

// index.jsx
import React from 'react'
import ReactDOM from 'react-dom'

// React類負責邏輯控制, 比如修改數(shù)據(jù) -> vdom
// ReactDOM 類負責渲染, vdom -> dom
// babel-loader     jsx -> vdom     <h1>React基礎</h1>  => React.createElement('h1', 'React 基礎')
const jsx = <h1>React基礎</h1>
ReactDOM.render(jsx, document.getElementById('root'))

2.組件

一.組件有兩種形式: class 組件和 function 組件

class組件擁有狀態(tài)和生命周期,繼承與 Component, 實現(xiàn) render 方法.

// components/JsxText.jsx
import React, { Component } from 'react'

export default class JsxText extends Component {
    render() {
        return (
            <div>react 基礎</div>
        )
    }
}

函數(shù)式組件

// App.jsx
import React from 'react'
import JsxText from './components/JsxText'

export default function App() {
    return (
        <div>
            <JsxText />
        </div>
    )
}

二.組件狀態(tài)管理

// components/State.jsx
import React, { Component, useState, useEffect } from 'react'

// class 組件
class Time extends Component {
    state = {
        date: new Date()
    }

    componentDidMount() {
        // 定時器
        this.timer = setInterval(() => {
            this.setState({
                date: new Date()
            })
        }, 1000)
    }

    componentWillMount() {
        clearInterval(this.timer)
    }

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

// 函數(shù)組件 useState, useEffect 
// hooks 版本要求 >= 16.8.x
function TimeFn() {
    // 創(chuàng)建狀態(tài), useState返回狀態(tài)和修改狀態(tài)的函數(shù)所組成的數(shù)組
    const [date, setDate] = useState(new Date())

    useEffect(() => {
        const timer = setInterval(() => {
            setDate(new Date())
        }, 1000)
        return () => { // 相當于 componentWillUnmount 狗子
            clearInterval(timer)
        }
    }, []) // 參數(shù) 2 指的依賴的狀態(tài), [] 中的值變化 useEffect 中的方法執(zhí)行, 本案例只需執(zhí)行一次,所以為空數(shù)組

    return (
        <div>
            {date.toLocaleTimeString()}
        </div>
    )
}


export default function State() {
    return (
        <div>
            <Time></Time>
            <TimeFn></TimeFn>
        </div>
    )
}

//App.jsx
<div>
    {/* 狀態(tài)管理 */}
    <State />
</div>

三.組件通信

// State.jsx
class Time extends Component {
    state = {
        date: new Date()
    }

    componentDidMount() {
        // 定時器
        this.timer = setInterval(() => {
            this.setState({
                date: new Date()
            }, () => {
                this.props.change(this.state.date)
            })
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }
    render() {
        return (
            <div>
                {this.state.date.toLocaleTimeString()}
                {this.props.name}
            </div>
        );
    }
}

function TimeFn(props) {
    // ......
    return (
        <div>
            {date.toLocaleTimeString()}
            {props.name}
        </div>
    )
}

export default function State() {
    return (
        <div>
            <Time name="cherries" change={(date) => { console.log(date.toLocaleTimeString()) }}></Time>
            <TimeFn name="cherries"></TimeFn>
        </div>
    )
}

使用 Context

// components/ContentText.jsx
import React, { useState } from 'react'

// 1.創(chuàng)建上下文
const Context = React.createContext()
// 2.獲取Provider 和 Consumer
const { Provider, Consumer } = Context

function Child(props) {
    return (
        <div onClick={props.add}>{props.counter}</div>
    )
}

export default function ContextText() {
    const [counter, setCounter] = useState(0)

    const add = () => {
        setCounter(counter + 1)
    }

    return (
        <Provider value={{counter, add}}>
            <Consumer>
                { value => <Child {...value}></Child>}
            </Consumer>
            <Consumer>
                { value => <Child {...value}></Child>}
            </Consumer>
        </Provider>
    )
}

// App.jsx
export default function App() {
    return (
        <div>
            <ContextText/>
        </div>
    )
}

四.高階組件

// comopnents/Hoc.jsx
import React from 'react'

const Lesson = (props) => {
    return (
        <div>
            {props.stage} - {props.title}
        </div>
    )
}

const lessons = [
    { stage: 'React', title: 'React1' },
    { stage: 'React', title: 'React2' },
    { stage: 'React', title: 'React3' },
]

// 定義高階函數(shù)
const withContent = Comp => props => {
    const content = lessons[props.index]
    return <Comp {...content} />
}

const LessonWithContent = withContent(Lesson)

export default function Hoc() {
    return (
        <div>
            { [1,1,1].map((item, index) => (
                <LessonWithContent key={index} index={index}></LessonWithContent>
            )) }
        </div>
    )
}

// App.jsx
export default function App() {
    return (
        <div>
            <Hoc/>
        </div>
    )
}

提示: 支持裝飾器配置: npm install -D @babel/plugin-proposal-decorators customize-cra

const { addDecoratorsLegacy } = require("customize-cra");
module.exports = override( ...,
    addDecoratorsLegacy()
);

五.組件復合(插槽)

// components/Composition
import React from 'react'

function Dialog(props) {
    return <div style={{ border: '1px solid blue' }}>{props.children.def}</div>
}

export default function Composition() {
    return (
        <Dialog>
            // 普通插槽
            // {
            //     <h1>cherries</h1>
            // }
            // 具名插槽
            // {{
            //     def: (
            //         <h1>組件復合</h1>
            //     )
            // }}
        </Dialog>
    )
}

// components/Composition
// 作用域插槽
function Dialog(props) {
    const { def, content } = props.children({name: 'cherries', content: '內(nèi)容'})

    return <div style={{ border: '1px solid blue' }}>
        {def}
        {content}
    </div>
}

export default function Composition() {
    return (
        <Dialog>
            {({name, content}) => ({
                def: <h1>{name}</h1>,
                content: <h2>{content}</h2>
            })}
        </Dialog>
    )
}

// App.jsx
export default function App() {
    return (
        <div>
            <Composition/>
        </div>
    )
}