小小程序猿之react修炼之路

REACT

1. context

1. 引入createContext

 `import { createContext } from 'react'`

2. createContext创建上下文

`export const ThemeContext = createContext()`

3. 根据上下文创建Provider, Consumer

eg1:
export const ThemeProvider = ThemeContext.Provider
eg2: Consumer
export const ThemeConsumer = ThemeContext.Consumer

4. provider包裹组件

<ThemeProvider value={theme}>
     <ChildPage />
     <FunChild />
 </ThemeProvider>

5. 组件引用

• class组件

eg1: contextType context
static contextType = ThemeContext
const { themeColor } = this.context
<div style={{color: themeColor}}>
    ChildPage
</div>

eg2: Consumer
<ThemeConsumer>
	{themeContext => <Child {...themeContext} />}
</ThemeConsumer>
function Child(props){
	return <div>{props.name}</div>
}

• fun组件

const context = useContext(ThemeContext)
<div style={{color:context.themeColor}}>
    FunChild
</div>

2. HOC

高阶组件是参数为组件，返回值为新组件的函数

1. 定义一个高阶函数

const foo = Cmp => props => {
    return (
        <div style={{padding:'15px',border:'1px solid #000'}}>
            <Cmp {...props} />
        </div>
    )
}

2. 定义一个子函数

function Child(props) {
    return <div>child --- {props.name}</div>
}

3. 调用一个高阶函数返回一个新组件

const Foo = foo(foo(Child))

4. 渲染新组建并传递props

const HocPage = props => {
    return (
        <div>
             <Foo name="参数" />
        </div>
    );
};

3. react基础

1. react入门
2. jsx语法
3. 组件
4. 正确使用setState
5. 生命周期
6. 组件复合
7. redux
8. react-redux
9. react-router
10. PureComponent === shouldComponentUpdate 优化 条件 不rendeer
11. vscode常用插件和antd配置

redux

createStore
reducer(state,action){}
const store = createStore(reducer)
// dispatch 改变store
store.dispatch(action)
//订阅渲染视图
store.subscribe(() => {this.forceUpdate()})
//index.js
store.subscribe(() => {
ReactDOM.reader(<APP/>,document.getElementById('root'))
})

react-redux

provider
connect

<Provider store={store}><Provider />

const mapStateToProps = {
	value: state.value,
}
const mapDispatchToProps = {
   inputChange(e){
         let action = {
             type:'change_input',
             value: e.target.value
         }
         dispatch(action)
     },
}
export default connect(mapStateToProps,mapDispatchToProps)(Component)
})

react-router

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'

<Router>
    <Link to="/">首页</Link>
    <Link to="/about">相关</Link>
    {/* children > componment > render */}
    <Switch>
        <Route exact 
            path="/" 
            component={Home}
            children={() => <div>children</div>}
            render={() => <div>render</div>}
        ></Route>
        <Route exact path="/about" component={About}></Route>
    </Switch>
</Router>
function Home() {
    return(<div>Home</div>)
}
function About() {
    return(<div>About</div>)
}

4. Hook

注意：

只能在函数最外层调用hook（不要在循环，条件判断或者子函数中调用）
只能在函数组件调用hook

1. useState
2. useEffect 副作用
3. useContext
4. useMemo(开销昂贵，且没有必要)
5. useCallback

4.1 useMemo

import React, { useState, useMemo } from 'react'

const UseMemoPage = props => {
    const [ count, setCount ] = useState(0)
    const [ value, setValue ] = useState('')
    const addCount = useMemo(() => {
            let sum = 0
            for (let i = 0; i < count; i++) {
                sum += i            
            }
            return sum
        }, [count])
        console.log(addCount); //返回的为值 count不变 值不变
        return (
        <div>
            <h1>count === {count}</h1>
            <h1>sum === {addCount}</h1>
            <h1>value === {value}</h1>
            
            <button onClick={() => setCount(count + 1)}>add</button>
            <input type="text" onChange={(e) => setValue(e.target.value)}/>
        </div>
    );
};

4.2 useCallback

import React, { useState, useCallback } from 'react';
 
const set = new Set();
 
export default function Callback() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');
 
    const callback = useCallback(() => {
        console.log(count);
    }, [count]);
    console.log(callback) //返回的为函数本省
    set.add(callback);
    console.log(set);  //判断返回的函数是否是原来的 count不变 函数就是原来的
 
    return (
        <div>
            <h4>{count}</h4>
            <h4>{set.size}</h4>
            <div>
                <button onClick={() => setCount(count + 1)}>+</button>
                <input value={val} onChange={event => setVal(event.target.value)}/>
            </div>
        </div>
    )
}

5. 自定义Hook

注意：

以use开头
函数内部可以调用其他的hook

5.1改造前

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

const MyHook = props => {
    const [ date, setDate ] = useState(new Date())
    useEffect(() => {
        const timer = setInterval(() => {
            setDate(new Date())
        }, 1000);
        return () => clearInterval(timer)
    }, [])
    return (
        <h1>{date.toLocaleTimeString()}</h1>
    )
};

export default MyHook;

5.2改造后

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

const MyHook = props => {
    return (
        <h1>{useClock().toLocaleTimeString()}</h1>
    )
};

function useClock() {
    const [ date, setDate ] = useState(new Date())
    useEffect(() => {
        const timer = setInterval(() => {
            setDate(new Date())
        }, 1000);
        return () => clearInterval(timer)
    }, [])
    return date
}

export default MyHook;