[JavaScript知识库]61 react

#react`

下载

npx create-react-app <name>

两种组件创建方式

函数组件

const App = () => {
    return ()
}

class 类组件

import React from 'react'

class App extends React.Component {
    render() {
        return ()
    }
}

UI 渲染

import ReactDOM from 'react-dom'
import App from './App'

ReactDom.render(
	<App />,
    document.querySelector('#root')
)

生命周期钩子函数

只适用于 class 类组件

创建时（挂载阶段）

更新时（更新阶段）

卸载时（卸载阶段）

Hooks

只适用于函数组件,可以使用 useEffect 模拟 class 类组件的生命周期钩子函数

useState

状态管理

import { useState } from 'react'

const [num, setNum] = useState(0)
const handleClick = () => {
	setNum(num + 1)
}
const App = () => {
    return (
        <>
            <h1>{ num }</h1
            <button onClick={ handleClick }>点击加1</button>
		</>
    )
}

useEffect

可用于模拟 class 类组件的生命周期钩子函数

import { useState, useEffect } from 'react'

const [num, setNum] = useState(0)
useEffect(() => {
    console.log('模拟 componentDidMount + componentDidUpdate')
})
useEffect(() => {
    console.log('模拟 componentDidMount')
}, [])
useEffect(() => {
    console.log('模拟 compinentDidMount + componentDidUpdate 且只依赖于 num 的更新')
}, [num])
useEffect(() => {
    return () => {
        console.log('模拟 componentWillUnmount')
	}
})
const App = () => {
    return (
        <p>App</p>
    )
}

useNavigate

用于编程式导航，适用于新版本 react-router

import { useNavigate } from 'react-router-dom'

const navigate = useNavigate()
const handleClick = () => {
    navigate('/home', { push: true })
}
const App = () => {
    return (
    	<button onClick={ handleClick }>点击跳转到Home</button>
    )
}

useHistory

用于编程式导航，适用于旧版本 react-router

import { useHistory } from 'react-router-dom'

const history = useHistory()
const handleClick = () => {
    history.push('/home')
}
const App = () => {
    return (
    	<button onClick={ handleClick }>点击跳转到Home</button>
    )
}

组件通信

父传子

import ReactDOM from 'react-dom'
import { useState } from 'react'

const Father = () => {
    const [fatherData, setFatherData] = useState({
        dataFrom: 'father',
    })
    return <Son fatherMsg={fatherData} />
}

const Son = props => {
    console.log('父组件传递过来的数据：', props.fatherMsg)
    return (
    	<p>son</p>
    )
}

ReactDOM.render(
    <Fatehr />,
    document.querySelector('#root')
)

子传父

import ReactDOM from 'react-dom'
import { useState } from 'react'

const Father = () => 
	const handleGetData = msg => {
    	console.log('子组件传递过来的数据：', msg)
    }
    return <Son getSonData={handleGetData} />
}

const Son = props => {{
    const [sonData, setSonData] = useState({
        dataFrom: 'son',
    })
    const handleClick = () => {
        props.getSonData(sonData)
    }
    return (
        <>
    		<p>son</p>
        	<button onClick={handleClick}>点击发送数据</button>
        </>
    )
}

ReactDOM.render(
    <Fatehr />,
    document.querySelector('#root')
)

跨层级通信

import ReactDOM from 'react-dom'
import { useState, createContext } from 'react'

const { Provider, Consumer } = createContext()
const GrandPa= () => {
  const [data, setData] = useState({
    from: 'grandpa',
  })
  return (
    <Provider value={data}>
      <Father />
    </Provider>
  )
}

const Father = () => {
    return <Son />
}

const Son = () => {
  return (
    <Consumer>
      {
        data => <p>{ data.from }</p>
      }
    </Consumer>
  )
}

ReactDOM.render(
      <GrandPa />,
    document.querySelector('#root')
)

react-router

下载

npm i react-router-dom

使用

使用 react-router 必须使用 BrowserRouter 或 HashRouter 包裹

import ReactDOM from 'react-dom'
import App from './App'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
	<Router>
    	<App />
    </Router>,
    doucment.querySelector('#root')
)

导航

点击导航

import { Link } from 'react-router-dom'

<Link to='/home'>点击跳转到Home</Link>

编程式导航

高版本使用 useNavigate ，低版本使用 useHistory

路由

新版本

import { Routes, Route } from 'react-router-dom'
import Home from './pages/home'

<Routes>
    <Route path='/home' element={<Home />} />
</Routes>

路由和渲染路由分离

路由

import Home from '../pages/home'

const routes = [
    {
        name: 'home',
        path: '/home',
        element: Home,
    }
]

export default routes

渲染路由函数

import { Routes, Route } from 'react-router-dom'

const renderRoutes = routes => {
    return (
    	<Routes>
        	{
                routes.map(route => {
                    return (
                    	<Route key={route.name} path={route.path} element={<route.element />} />
                    )
                })
            }
        </Routes>
    )
}

export default renderRoutes

渲染路由

import routes from './ulits/routes'
import renderRoutes from './ulits/renderRoutes'

const App = () => {
    return (
        <Link to='/home'>点击跳转到Home</Link>
    	renderRoutes(routes)
    )
}

旧版本

import { Switch, Route } from 'react-router-dom'
import Home from './pages/home'

<Switch>
    <Route path='/home' component={Home} />
</Switch>

redux

下载

npm i redux react-redux

使用

使用 redux 必须使用 Provider 包裹

import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
import { Proider } from 'react-redux'

ReactDOM.render(
	<Provider store={store}>
    	<App />
    </Provider>,
    doucment.querySelector('#root')
)

三大原则

单一数据源

state 是只读的

使用纯函数修改数据

核心

actions

const action = () => {
    return {
        type: 'count'
    }
}

module.exports = {
    action,
}

reducers

const initState = {
    count: 0,
}

const reducer = (state=initState, action) => {
    switch(action.type) {
        case 'count':
            return {
                count: state.count + 1
            }
        default:
            retun state
    }
}

module.exports = {
    reducer,
}

store

import { combineReducers, createStore } feom 'redux'
import { reducer } from '../reducer'

cosnt reducers = combineReducers({
    reducer,
})

cosnt store = createStore(reducers)

export default store

数据的发送与获取

connect

import { connect } from 'react-redux'
import { action } from './redux/action'

const App = props => {
    retun (
        <>
        	<p>计数器：{ props.reducer.count }</p>
        </>
    )
}

const actionObj = action()
const mapStateToProps = state => {
    return state
}
const mapDispatchToProps = dispatch => {
    return {
        action: () => {
            dispatch(actionObj)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)
ps => {
    retun (
        <>
        	<p>计数器：{ props.reducer.count }</p>
        </>
    )
}

const actionObj = action()
const mapStateToProps = state => {
    return state
}
const mapDispatchToProps = dispatch => {
    return {
        action: () => {
            dispatch(actionObj)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)