React-进阶知识

// Redux
1. 相当于一个公共的存储区域和 vuex 类似
2. Redux = Reducer + Flux
3. 工作流程：[button] ==callback==> [dispatch] ==action==> [reducer] ==state==> [view]
  1. React Components 通过 dispatch（action）调用 Action Creators
  2. Action Creators 会通知到 Store
  3. Store 接收到 Action Creators 的两个参数即 previousState 和 action，会把这两个参数传递给 Reducers 中去操作
  4. Reducers 在创建 Store 时传递给了 Store
  5. Reducers 在操作完成后把对应的 newState 返回给 Store
  6. React Components 监听到 store 的变化重新获取到 Store 中的 value
  7. 相当于学生到图书馆借书流程
    1. React Components 相当于学生
    2. Store 相当于图书馆管理员
    3. Reducers 相当于书本具体位置
    4. Action Creators 相当于学生向管理员借书的对话语句
4. 常用 API
  1. createStore
  2. store.dispatch
  3. store.getState
  4. store.subscribe
5. 示例
  // index.js
  import { createStore } from 'redux' // npm install redux
  import reducer from './reducer.js'
  const store = createStore(reducer)
  export default store
  // reducer.js
  import { INPUTCHANGE, ADDITEM } from './actionType.js'
  const defaultState = {
    value: '',
    list: []
  }
  export default (state = defaultState, action) => {
    if (action.type === INPUTCHANGE) {
      // reducer 可以接收 state，但是绝不能修改 state
      const newState = JSON.parse(JSON.stringify(state)) // 深拷贝
      newState.value = action.value
      return newState
    }
    if (action.type === ADDITEM) {
      // reducer 可以接收 state，但是绝不能修改 state
      const newState = JSON.parse(JSON.stringify(state)) // 深拷贝
      newState.list.push(state.value)
      newState.value = ''
      return newState
    }
    return state
  }
  // actionType.js
  export const INPUTCHANGE = 'inputChange'
  export const ADDITEM = 'addItem'
  // actionCreators.js
  import { INPUTCHANGE, ADDITEM } from './actionType.js'
  export const handleInputChangeAction = value => ({
    type: INPUTCHANGE,
    value
  })
  export const handleAddItemAction = () => ({
    type: ADDITEM
  })
  // 组件
  import React, { Component } from 'react' // 一定要引入 React 否则编译报错，虽然在代码没显式用到
  import store from './index.js'
  import { handleInputChangeAction, handleAddItemAction } from './actionCreators.js'
  import { INPUTCHANGE, ADDITEM } from './actionType.js'
  class App extends Component {
    constructor(props) {
      super(props)
      this.state = store.getState() // getState 方法是 store 自带的
      this.handleChange = this.handleChange.bind(this)
      this.handleAdd = this.handleAdd.bind(this)
      store.subscribe(this.handleStoreChange) // 订阅或监听 store 变化
    }
    render() {
      return (
        <div>
          {/* value 是 store 中存储的 */}
          <input value = { this.state.value } onChange = { this.handleChange } />
          <button onClick = { this.handleAdd }>添加</button>
        </div>
      )
    }
    handleStoreChange() {
      // 一旦 store 发生改变就重新获取 store 里的数据
      this.setState(store.getState()) // store.getState() 返回一个对象
    }
    handleChange(e) {
      const action = {
        // action 下必须有一个 type 字段用于给到 reducer 做区分，而其他 value 都可以自定义名称
        type: INPUTCHANGE,
        value: e.target.value
      }
      // 最好集中管理 action 函数，而不是像上面一个在组件中创建 action
      const action = handleInputChangeAction(e.target.value)
      store.dispatch(action)
    }
    handleAdd() {
      const action = {
        type: ADDITEM
      }
      // 最好集中管理 action 函数，而不是像上面一个在组件中创建 action
      const action = handleAddItemAction()
      store.dispatch(action)
    }
  }
export default App
----------------------------------------------------------------------------------------------
// React-Redux 的使用，用于把 store 的 state 和 action 传递到组件的 props 中，便于使用
1. npm install react-redux
2. class组件示例
  // index.js
  import React from 'react'
  import ReactDOM from 'react-dom'
  import TodoList from './TodoList'
  import { Provider } from 'react-redux'
  import store from './store' // store 和正常定义的一样

  // 通过 Provider 让在里面的每个组件都能使用 store，还需要组件做连接
  const App = (
    <Provider store = { store }>
      <TodoList/>
    </Provider>
  )

  ReactDOM.render(App, document.getElementById('root'))
  // TodoList.js
  import React, { Component } from 'react'
  import { connect } from 'react-redux'

  class TodoList extends Component {
    render() {
      const {
        inputValue,
        handleChange,
        handleClick
      } = this.props
      return (
        <div>
          <input value = { inputValue } onChange = { handleChange } />
          <botton onClick = { handleClick }>提交</button>
        </div>
      )
    }
  }

  // 通过 react-redux 中的 connect 方法把当前组件和 store 做连接
  // mapStateToProps，会把 store 中的数据映射到组件的 props 中
  // mapDispatchToProps 会把 store 的 dispatch 方法映射到组件的 props 中
  const mapStateToProps = state => {
    return {
      inputValue: state.inputValue
    }
  }
  const mapDispatchToProps = dispatch => {
    return {
      handleChange(e) {
        const action = {
          type: 'change',
          value: e.target.value
        }
        dispatch(action)
      },
      handleClick() {
        const action = {
          type: 'add',
          value: e.target.value
        }
        dispatch(action)
      }
    }
  }

  export default connect(mapStateToProps, mapDispatchToProps)(TodoList)
3. functioncomponent 组件使用 useSelector 获取数据和 useDispatch 分发 action
  import { useSelector, useDispatch } from 'react-redux'
  const num1 = useSelector(state => state.num1)
  const num2 = useSelector(state => state.num2)
  const useDispatch = useDispatch()
  useDispatch(action)
----------------------------------------------------------------------------------------------
// redux chrome 扩展
1. 在网上应用商店安装完扩展后，需要在创建 store 的时候传入第二个参数即
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
2. 示例
  // store.js
  import { createStore } from 'redux' // npm install redux
  import reducer from './reducer.js'

  // 使用 devTools
  const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__())
  export default store
----------------------------------------------------------------------------------------------
// Redux 设计和使用的三项原则
1. store 是唯一的
2. 只有 store 能够改变自己的内容 // reducer 只是返回了 newState
3. reducer 必须是纯函数 // 纯函数指的是，给定固定的输入，就一定会有固定的输出，而且不会有任何副作用（就是不能对参数做修改）
----------------------------------------------------------------------------------------------
// redux 中间件，用于处理异步 action
1. 中间件实际上是对 dispatch 函数的封装修改，可以触发多次 action，最终再到 Reducer
2. redux-thunk
3. redux-saga
4. redux-promise
5. 原理示例
    import { createStore, applyMiddleware } from 'redux' // npm install redux
    import thunk from 'redux-thunk' // npm install redux-thunk
    import createLogger from 'redux-logger' // npm install redux-thunk
    import reducer from './reducer.js'

    const logger = createLogger()

    const store = createStore(
        reducer,
        applyMiddleware(thunk, logger) // 会按顺序执行
    )

    以上面的 redux-logger 日志中间件为例

    // 自己修改 dispatch，增加 logger
    let next = store.dispatch
    store.dispatch = function dispatchAndLog(action) {
        console.log('dispatching', action)
        next(action)
        console.log('next state', store.getState())
    }

----------------------------------------------------------------------------------------------
// redux-thunk 中间件，用于处理异步 action
1. 中间件是 action 和 store 之间
2. redux 的中间件就是对 action 的 dispatch 的封装，action 如果返回的是一个对象会直接给到 store，
    如果返回的是一个函数就会给到 dispatch
    同步：
        const addTodo = text => {
            return {
                type: 'ADD_TODO',
                text
            }
        }
    异步：
        const addTodoAsync = text => {
            return (dispatch) => {
                fetch(url).then(res => {
                    dispatch(addTodo(text))
                })
            }
        }
3. redux-thunk 是 redux 的中间件，它使得 action 可以是一个函数
4. 可以在 action 中做异步操作，而不是在组件的生命周期中
5. 示例
  // store.js
  import { createStore, applyMiddleware, compose } from 'redux' // npm install redux
  import thunk from 'redux-thunk' // npm install redux-thunk
  import reducer from './reducer.js'

  // 使用 thunk 和 devTools
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : compose
  const enhancer = composeEnhancers(applyMiddleware(thunk))

  const store = createStore(reducer, enhancer)
  export default store
  // action.js
  // 本来是 return 一个对象，现在 return 一个函数
  // 这个函数接收一个参数是 dispatch
  // 组件可以直接调用这个 action，这个 action 就会去获取数据调用下一个 action
  export const getList = () => {
    return dispatch => {
      axios.get('url').then(res => {
        const action = {
          type: 'getList',
          data: res.data
        }
        dispatch(action)
      })
    }
  }
  // 组件
  componentDidMount() {
    const action = getList()
    store.dispatch(action)
  }
----------------------------------------------------------------------------------------------
// redux-saga 中间件，用于处理异步 action
1. 和 redux-thunk 一样做异步
2. 示例
  // store.js
  import { createStore, applyMiddleware, compose } from 'redux' // npm install redux
  import createSagaMiddleware from 'redux-saga' // npm install redux-saga
  import sagas from './saga.js' // 集中管理的文件
  import reducer from './reducer.js'

  // 使用 saga 和 devTools
  const sagaMiddleware = createSagaMiddleware()
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : compose
  const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware))

  const store = createStore(reducer, enhancer)
  sagaMiddleware.run(sagas)
  export default store
  // saga.js
  import { takeEvery, put } from 'redux-saga/effects'
  function* getList() {
    const res = yield axios.get('url')
    const action = {
      type: 'initList',
      list: res.data
    }
    yield put(action) // put 方法是 saga 中自带的，相当于 dispatch
  }
  function* sagas() {
    yield takeEvery('getList', getList) // 监听这个 getList 的 action
  }
  export default sagas
  // 组件
  componentDidMount() {
    const action = getList()
    store.dispatch(action)
  }
----------------------------------------------------------------------------------------------
// redux 的 reducer 整合
1. 随着模块的增加，reducer 文件会越来越庞大，通过 redux 下的 combineReducers 可以整合小的 reducer
// reducer.js
import { combineReducers } from 'redux'
import headerReducers from './header/store/reducers.js'
const reducer = combineReducers({
  header: headerReducers
})
export default reducer
2. 通过在各个组件下新建 store 目录，再创建 reducer 文件，在每个组件中管理自己的 reducer
3. 各个组件中的 reducer 文件和未拆分 reducer 时的写法一样
4. 最后通过 store 整合成一个大的 reducer，在使用时会多一层级，store.getState().header.value // 多了整合时起的 header
----------------------------------------------------------------------------------------------
// redux 的 reducer 通过 immutable 库管理
1. 我们都知道，在 reducer 操作 state 时，是不能修改到 state 的，只能返回一个新的 state
2. 为了避免我们的误操作，可以引入 immutable 来管理我们的 state
3. 示例
// reducer.js
  import { INPUTCHANGE } from './actionType.js'
  import { formJS } from 'immutable' // npm install immutable

  const defaultState = formJS({ // 返回一个 immutable 对象
    value: ''
  })
  export default (state = defaultState, action) => {
    if (action.type === INPUTCHANGE) {
      // reducer 可以接收 state，但是绝不能修改 state
      const newState = JSON.parse(JSON.stringify(state)) // 深拷贝
      newState.value = action.value
      return newState
      // 上面的方式是通过深拷贝返回了一个新的 state，而通过 immutable 可以通过以下方式
      // immutable 对象的 set 方法，会结合之前 immutable 对象的值和设置的值，返回一个全新的对象
      return state.set('value', action.value)
    }
    return state
  }
  // 组件，如果使用了 immutable，就不能再通过 state.inputValue 方式取值，需要通过 get 方法
  const mapStateToProps = state => {
    return {
      inputValue: state.get('inputValue')
    }
  }
4. 通过 immutable 来管理我们根目录的 reducer（这样在获取 state 时，就只能通过 get 方式去获取，而不是点的方式）
5. 在获取修改 state 就可以直接都使用 immutable 下的方法了，不然各个组件下的 state 调用方法就会变成以下
    state.header.get('inputValue') // 先使用了 js 的调用方法调用 header，再使用 immutable 的 get 方法
    state.get('header').get('inputValue') // 都使用了 immutable 下的方法
    state.getIn(['header', 'inputValue']) // 和上同一效果
6. 示例
  // reducer.js
  // import { combineReducers } from 'redux' // 变成 redux-immutable
  import { combineReducers } from 'redux-immutable' // npm install redux-immutable
  import headerReducers from './header/store/reducers.js'
  const reducer = combineReducers({
    header: headerReducers
  })
  export default reducer
7. 注意：在 state 中的数据使用了 formJS 进行了转换，而在改变时，action 传过来的数据也需要通过 formJS 进行转换！！！
8. formJS() 对应的转换方法是 toJS() // list.toJS()
9. 多次改变 state 数据的 set 操作
    state.set('value', action.value).set('list', [])
    state.merge({ // 使用 merge 方法替换 set 方法
      value: action.value,
      list: []
    })
----------------------------------------------------------------------------------------------
// 实践
1. 使用 styled-components 写样式 // npm install styled-components
  import { injectGlobal } from 'styled-components'
  // 写全局样式必须跟 `` 反引号
  injectGlobal`
    html {
      margin: 0;
      padding: 0;
    }
  `
  // 组件样式
  import styled from 'styled-components'
  import logo from '../static/logo.png'
  export const Header = styled.input.attrs({
    placeholder: '搜索' // 也可以写在 JSX 中
  })`
    width: 100px;
    height: 100px;
    color: red;
    &.class-name { // 当这个组件上有这个类名时，这个组件会有下面的样式
      color: green;
    }
    .iconfot { // 这个组件下有这个类名时，会修饰这个类对应的样式
      width: 50px;
      height: 50px;
    }
  `
  export const Content = styled.div`
    width: 100px;
    height: 100px;
    background: url(${logo}) // 本地的图片
    background: url(${props => props.imgUrl}) // 组件上传进来的图片
  `
  // 组件引用
  import React, { Component } from 'react'
  import { Header, Content } from 'style.js' // 就是上面的 styled-components 的 js 文件

  class TodoList extends Component {
    render() {
      return (
        <div>
          <Header />
          <Content />
        </div>
      )
    }
  }

  export default TodoList
2. 在使用 styled-components 写组件时如果需要使用 ref 则需要把 ref 改成 innerRef，否则拿不到真实的 DOM
----------------------------------------------------------------------------------------------
// react-router-dom 路由
1. 示例
  // App.js
  import React from 'react'
  import ReactDOM from 'react-dom'
  import TodoList from './TodoList'
  import {
    BrowserRouter,
    Route,
    Switch
    Link,
    useParams, // 在孙子级的组件中使用，子级路由可以直接用 props
    useHistory, // 在孙子级的组件中使用，子级路由可以直接用 props
    useLocation, // 在孙子级的组件中使用，子级路由可以直接用 props
    useRouteMatch // 在孙子级的组件中使用，子级路由可以直接用 props
  } from 'react-router-dom' // npm install react-router-dom
  import Home from './pages/home'
  import Detail from './pages/detail'
  import { Provider } from 'react-redux'
  import store from './store' // store 和正常定义的一样

  // 通过 Provider 让在里面的每个组件都能使用 store，还需要组件做连接
  // 实际没有 `` 反引号，只是编辑器显示效果
  const App = (
    `<Provider store = { store }>
      <div>
        <BrowserRouter>
          <Switch>
            {/* Link 组件和 vue 的 router-link 类似 */}
            <Link to='/'>
              <TodoList/>
            </Link>
            {/* exact 表示只有 url 和 path 内容一样时才显示 */}
            <Route path='/' exact render={() => <div>home</div>}>
            <Route path='/detail' exact render={() => <div>detail</div>}>
            {/* 上面是匹配到路由渲染，下面是匹配到路由显示组件 */}
            <Route path='/' exact component={Home}>
            <Route path='/detail' exact component={Detail}>
            <Route render={() => 404}>
          </Switch>
        </BrowserRouter>
      </div>
    </Provider>`
  )

  ReactDOM.render(App, document.getElementById('root'))
2. 动态路由
  1. 在 Link 组件的 to 属性上写 to = {`/detail/${id}`} 可以把对应参数传递到跳转的组件上去
  2. 在对应的组件上通过 this.props.match.params.id 获取
3. 带参路由
  1. 在 Link 组件的 to 属性上写 to = {`/detail?id=${id}`} 可以把对应参数传递到跳转的组件上去
  2. 在对应的组件上通过 this.props.location.search 获取
4. 重定向路由
  import { Redirect } from 'react-router-dom'
  render() {
    return (
      <Redirect to='/' />
    )
  }
5. 一般在项目中，我们会有一个 router 的文件夹来管理路由配置，而不是像上面一样直接把路由配置写在 App 中
    // src/router/index.jsx
    import { createBrowserRouter } from "react-router-dom";
    import Home from "../views/Home";
    import Login from "../views/Login";
    import Content from "../views/Content";

    const router = createBrowserRouter([
        {
            path:'/',
            element: <Home />,
            // 嵌套路由
            children: [
                {
                    path: 'content',
                    element: <Content />
                }
            ]
        },
        {
            path:'/login',
            element: <Login />,
        }
    ])

    export default router

    // home.jsx
    import { Outlet } from "react-router-dom"
    <div className="main">
        <h1>这里是home页</h1>
        <div className="layout"></div>
        <div className="content">
            <Outlet /> // 嵌套路由
        </div>
    </div>

    // App.js
    import { RouterProvider } from "react-router-dom"
    import router from "./router"

    function App() {
        return (
            <RouterProvider router={router} />
        )
    }

    export default App
----------------------------------------------------------------------------------------------
// 异步组件
1. 示例
  // loadable.js
  import React from 'react'
  import Loadable from 'react-loadable' // npm install react-loadable

  const LoadableComponent = Loadable({
    loader: () => import('./TodoList'), // 动态加载当前目录下的组件文件
    loading() {
      return <div>正在加载</div> // 加载时显示的组件
    }
  })

  export default () => <LoadableComponent />
2. 当使用异步组件时，需要一个 loadable.js 文件做过渡加载，而在 App.js 中引入的文件也是这个过渡文件
3. 当有异步组件需要获取路由上的参数时，这时如果使用了这个过渡文件，则异步组件就拿不到路由上的参数
4. 需要使用 react-router-dom 中的 withRouter 方法
  // TodoList.js
  import React, { Component } from 'react'
  import { connect } from 'react-redux'
  import { withRouter } from 'react-router-dom' // 能让这个组件获取到路由上的参数

  class TodoList extends Component {
    render() {
      const {
        inputValue,
        handleChange,
        handleClick,
      } = this.props
      return (
        <div>
          <input value = { inputValue } onChange = { handleChange } />
          <botton onClick = { handleClick }>提交</button>
        </div>
      )
    }
  }

  // 通过 react-redux 中的 connect 方法把当前组件和 store 做连接
  // mapStateToProps，会把 store 中的数据映射到组件的 props 中
  // mapDispatchToProps 会把 store 的 dispatch 方法映射到组件的 props 中
  const mapStateToProps = state => {
    return {
      inputValue: state.inputValue
    }
  }
  const mapDispatchToProps = dispatch => {
    return {
      handleChange(e) {
        const action = {
          type: 'change',
          value: e.target.value
        }
        dispatch(action)
      },
      handleClick() {
        const action = {
          type: 'add',
          value: e.target.value
        }
        dispatch(action)
      }
    }
  }

  export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TodoList))
----------------------------------------------------------------------------------------------
// React 高阶组件和 Render Props
1. 关于组件公共逻辑的抽离
  1. mixin 已被 react 弃用
  2. 使用高阶组件 HOC // 模式简单，但会增加组件层级，在透传属性和新增属性的时候可能会冲突（缺点）
  3. Render Props，有点像插槽的概念 // 代码简洁，学习成本较高
  4. 层级的区别：HOC 是公共逻辑组件把子组件包裹进来，而 Render Props 是子组件包裹公共逻辑组件
2. HOC 示例 // 命名规范以 with 开头，如 withAddToCart
  // 类似是工厂模式或装饰器，传入一个组件返回一个新的组件，新的组件包含了公共的逻辑
  // 高阶组件不是一种功能，而是一种模式
  // react-redux 的 connect 就是一个高阶组件
  const withMouse = Component => {
    class HOC extends React.Component {
      // 在此定义多个组件的公共逻辑
      // 如获取鼠标的位置
      constructor(props) {
        super(props)
        this.state = {
          x: 0,
          y: 0
        }
        this.handleMouseMove = this.handleMouseMove.bind(this)
      }

      render() {
        // 1. 透传 props
        // 2. 传递公共的参数，如 mouse
        // 3. 在透传属性和新增属性的时候可能会冲突（缺点）
        return (
          <div onMouseMove = { this.handleMouseMove }>
            <Component {...this.props} mouse = { this.state } />
          </div>
        )
      }

      handleMouseMove(e) {
        this.setState({
          x: e.clientX,
          y: e.clientY
        })
      }

    }
    return HOC
  }
  // 组件.js
  import withMouse from './HOC.js'
  import React from 'react'
  class Test extends React.Component {
    constructor(props) {
      super(props)
    }
    render() {
      return (
        {/* 在当前组件中即可获取到 x、y 的值 */}
        <h1>{ this.props.mouse.x }</h1>
        <h1>{ this.props.mouse.y }</h1>
      )
    }
  }
  export default withMouse(Test) // 返回 x、y 的公共逻辑
3. Render Props 示例
  // 传递一个 render 函数给组件，组件再 return 这个 render 函数，顺便把参数传进去
  // 通过一个函数将 class 组件的 state 作为 props 传递给纯函数组件
  class Mouse extends React.Component {
    // 在此定义多个组件的公共逻辑
    // 如获取鼠标的位置
    constructor(props) {
      super(props)
      this.state = {
        x: 0,
        y: 0
      }
      this.handleMouseMove = this.handleMouseMove.bind(this)
    }

    render() {
      // 1. 透传 props
      // 2. 传递公共的参数，如 mouse
      return (
        <div onMouseMove = { this.handleMouseMove }>
          {/* 将当前 state 作为 props 传递给 render */}
          { this.props.render(this.state) }
        </div>
      )
    }

    handleMouseMove(e) {
      this.setState({
        x: e.clientX,
        y: e.clientY
      })
    }

  }
  Mouse.propType = {
    render: PropType.func.isRequired
  }
  // Test.js
  import React from 'react'
  import Mouse from './Mouse.js'
  class Test extends React.Component {
    constructor(props) {
      super(props)
    }
    render() {
      return (
        {/* 在当前组件中即可获取到 x、y 的值 */}
        <Mouse render = { props => <h1>{props.x} {props.y}</h1> } />
      )
    }
  }
----------------------------------------------------------------------------------------------
// 错误监听
1. getDerivedStateFromError + componentDidCatch
2. getDerivedStateFromError 用于更新 state，使下一次渲染能够显示降级后的 UI
3. componentDidCatch 用于统计上报错误信息
4. 只监听组件渲染时报错，不监听 DOM 事件、异步错误
5. 不会监听 DOM 事件报错，需要 try catch
6. 不会监听异步错误，可用 window.onerror
7. production 环境生效，develop 环境会直接抛出错误
8. promise 未处理的 catch 需要 onunhandledrejection
----------------------------------------------------------------------------------------------
// React Hooks
1. 可选功能，100% 向后兼容，没有破坏性改动，不会取代 'class' 组件，尚无计划要移除 'class' 组件
2. 函数组件的特点
  1. 没有组件实例
  2. 没有生命周期
  3. 没有 state 和 setState，只能接收 props
  4. 引入 reacrt 返回函数，函数中返回 jsx
3. 'class' 组件的问题
  1. 大型组件很难拆分和重构，很难测试（即不易拆分）
  2. 相同业务逻辑，分散到各个方法中，逻辑混乱
  3. 复用逻辑的复杂，如 mixin、HOC、Render Prop
4. React 组件更易用函数表达
  1. React 提倡函数式编程，view = fn(props)
  2. 函数更灵活，更易拆分，更易测试
  3. 但函数组件太简单，需要增强能力 —— Hooks
----------------------------------------------------------------------------------------------
// useState Hook 让函数组件实现 state 和 setState
1. 默认函数组件没有 state
2. 函数组件是一个纯函数，执行完即销毁，无法存储 state
3. 需要 state hook，即把 state 功能'钩'到纯函数中
4. useState Hook 示例 // 用 useState 实现 state 和 setState 功能
  import React, { useState } from 'react'

  function ClickCounter() {
    // 数组的解构
    // useState 就是一个 hook，最基本的一个 hook
    // 传入一个初始值，相当于在 class 组件中的 state 中定义的
    // 名字自定义，方法一般以 set 开头
    const [count, setCount] = useState(0)
    const [name, setName] = useState('chenj')

    function handleClick() {
      setCount(count + 1)
      setName(count + 2021)
      // 这边的 set 操作，和 class 组件的 setState 有同样的问题
      setCount(count => count + 1) // 最好使用函数赋值，避免在 useEffect 中使用的问题、还有多次赋值会合并成最后一次赋值的情况
    }

    return (
      <div>
        <div>{ name }点击了{ count }次</div>
        <button onClick = { handleClick }>点击</button>
      </div>
    )

  }

  export default ClickCounter
----------------------------------------------------------------------------------------------
// useEffect Hook 让函数组件模拟生命周期
1. 默认函数没有生命周期
2. 函数组件是一个纯函数， 执行完即销毁，自己无法实现生命周期
3. 使用 Effect Hook 把生命周期'钩'到纯函数中
4. useEffect 让纯函数有了副作用
  1. 默认情况下，执行纯函数，出入参数，返回结果，无副作用
  2. 所谓副作用，就是对函数之外造成影响，如设置全局定时任务等
  3. 而组件需要副作用，所以需要 useEffect '钩'到纯函数中
5. useEffect Hook 示例
  import React, { useState, useEffect } from 'react'

  function ClickCounter() {
    // 数组的解构
    // useState 就是一个 hook，最基本的一个 hook
    // 传入一个初始值，相当于在 class 组件中的 state 中定义的
    // 名字自定义，方法一般以 set 开头
    const [count, setCount] = useState(0)
    const [name, setName] = useState('chenj')

    // 传 []
    useEffect(() => {
      console.log('componentDidMount')
      // 如果依赖是空，则返回的函数等同于 componentWillUnmount
      return () => {
        console.log('componentWillUnmount')
      }
    }, []) // 这两个生命周期没有依赖

    // 传 state 数据
    useEffect(() => {
      console.log('componentDidUpdate') // count 和 name 发生变化时，也会执行
      console.log('componentDidMount')
      // 如果传了 state 参数，要特别注意，return 的函数不完全等同于 componentWillUnmount
      // 返回的函数会在下一次 Effect 执行之前被执行！！！
      // 即在数据更新后触发执行 useEffect 钩子之前执行！！！
      return () => {
        console.log('componentWillUnmount')
      }
    }, [count, name]) // 只有 count 和 name 发生变化才会触发，也可以只传第一个

    // 不传
    useEffect(() => {
      console.log('componentDidUpdate') // useState 中的数据发生变化时，也会执行
      console.log('componentDidMount')
      // 如果没传第二个参数，要特别注意，return 的函数不完全等同于 componentWillUnmount
      // 返回的函数会在下一次 Effect 执行之前被执行！！！
      // 即在数据更新后触发执行 useEffect 钩子之前执行！！！
      return () => {
        console.log('componentWillUnmount')
      }
    }) // 没传第二个参数，在初始化和数据发生变化时都会触发（不管哪个数据，只要是 useState 生成的）

    function handleClick() {
      setCount(count + 1)
      setName(count + 2021)
    }

    return (
      <div>
        <div>{ name }点击了{ count }次</div>
        <button onClick = { handleClick }>点击</button>
      </div>
    )

  }

  export default ClickCounter
----------------------------------------------------------------------------------------------
// useRef Hook
  import React, { useRef, useEffect } from 'react'

    function UseRef() {
      const btnRef = useRef(null)

      // class 组件的写法
      // this.btnRef = React.createRef()

      useEffect(() => {
        console.log(btnRef.current) // DOM 节点
      }, [])

      return (
        <div>
          <button ref = { btnRef }>点击</button>
        </div>
      )

    }

    export default UseRef
----------------------------------------------------------------------------------------------
// useContext Hook
  import React, { useContext } from 'react'
    // 主题颜色
    const themes = {
      light: {
        foreground: '#000',
        background: '#eee'
      },
      dark: {
        foreground: '#fff',
        background: '#222'
      }
    }
    // 创建 Context
    const ThemeContext = React.createContext(themes.light)

    function App() {
      return (
        <ThemeContext.Provider value = { themes.light }>
          <Toolbar />
        </ThemeContext.Provider>
      )
    }

    // 模拟子组件
    function Toolbar() {
      return (
        <ThemeButton />
      )
    }

    // 模拟孙子组件
    function ThemeButton() {
      // 使用 useContext
      const theme = useContext(ThemeContext)
      return (
        <div style = {{ background: theme.background, color: theme.foreground }}>hello</div>
      )
    }

    export default App
----------------------------------------------------------------------------------------------
// useReducer Hook
1. useReducer 和 redux 的区别
  1. useReducer 是 useState 的代替方案，用于 state 复杂变化
  2. useReducer 是单个组件状态管理，组件通讯还需要 props
  3. redux 是全局的状态管理，多组件共享数据
2. 示例
  import React, { useReducer } from 'react'

  const initialState = { count: 0 }

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

  function App() {
    // 很像 const [count, setCount] = useState(0)
    const [state, dispatch] = useReducer(reducer, initialState)

    return (
      <div>
        count: { state.count }
        <button onClick = { () => dispatch({ type: 'increment' })}>increment</button>
        <button onClick = { () => dispatch({ type: 'decrement' })}>decrement</button>
      </div>
    )
  }

  export default App
----------------------------------------------------------------------------------------------
// useMemo hook 做数据性能优化
1. memo 类似 'class' 组件的 PureComponent，对函数组件的 props 进行浅比较
2. useMemo 是对数据做缓存，有依赖变化才会改变
3. memo 在props不变的情况，可以完全不执行子组件代码，
    而 useMemo 依然会运行子组件的代码，只是不执行return渲染，这是两个的区别
4. 示例
  import React, { useState, memo, useMemo } from 'react'

  // 子组件
  const Child = memo(props => {
    return (
      <div>
        { props.userInfo.name }{ props.userInfo.age }
      </div>
    )
  })

  // 父组件
  function App() {

    const [count, setCount] = useState(0)
    const [name, setName] = useState('chenj')

    // 用 useMemo 缓存数据，有依赖，依赖变化才会进行重新渲染
    const userInfo = useMemo(() => {
      return { name, age: 20 }
    }, [name])

    return (
      <div>
        count: { state.count }
        <button onClick = { () => setCount(count + 1)}>增加</button>
        <Child userInfo = { userInfo } />
      </div>
    )
  }

  export default App
----------------------------------------------------------------------------------------------
// useCallback hook 做事件性能优化
1. 和 useMemo 类似，一个针对于数据，一个针对于方法
2. 示例
  import React, { useState, memo, useMemo, useCallback } from 'react'

  // 子组件
  const Child = memo(props => {
    return (
      <div>
        { props.userInfo.name }{ props.userInfo.age }
        <input onChange = { props.handleChange } />
      </div>
    )
  })

  // 父组件
  function App() {

    const [count, setCount] = useState(0)
    const [name, setName] = useState('chenj')

    // 用 useMemo 缓存数据，有依赖，依赖变化才会进行重新渲染
    const userInfo = useMemo(() => {
      return { name, age: 20 }
    }, [name])

    // 用 useCallback 缓存函数，不需要依赖！！！
    const handleChange = useCallback(e => {
      console.log(e)
    }, [])

    return (
      <div>
        count: { state.count }
        <button onClick = { () => setCount(count + 1)}>增加</button>
        <Child userInfo = { userInfo } handleChange = { handleChange }  />
      </div>
    )
  }

  export default App
----------------------------------------------------------------------------------------------
// 自定义 hook
1. 封装通用功能
2. 开发和使用第三方 hooks
3. 自定义 hook 带来了无限的扩展性，解耦代码
4. 本质是一个函数，以 use 开头
5. 内部正常使用 useState、useEffect 获取其他 hooks
6. 自定义返回结果，格式不限
7. 第三方 Hook
  1. 'https://nikgraf.gitgub.io/react-hooks'
  2. 'https://github.com/umijs/hooks'
8. 示例
  import { useState, useEffect } from 'react'
  import axios from 'axios'

  function useAxios(url) {
    const [loading, setLoading] = useState(false)
    const [data, setData] = useState()
    const [error, setError] = useState()

    useEffect(() => {
      setLoading(true)
      axios.get(url)
        .then(res => setData(res))
        .catch(err => setError(err))
        .finally(() => setLoading(false))
    }, [url])

    return [loading, data, error]
  }

  export default useAxios
----------------------------------------------------------------------------------------------
// Hooks 组件逻辑复用，就是自定义 Hook
1. 'class'组件逻辑复用存在的问题
  1. Mixins
    1. 变量作用域来源不清
    2. 属性重名
    3. Mixins 引入过多会导致顺序冲突
  2. 高阶组件 HOC
    1. 组件层级嵌套过多，不易渲染，不易调试
    2. HOC 会劫持 props，必须严格规范，容易出现疏漏
  3. Render Prop
    1. 学习成本高，不易理解
    2. 只能传递纯函数，而默认情况下纯函数功能有限
2. Hooks 做组件逻辑复用的好处
  1. 完全符合 Hooks 原有规则，没有其他要求，易理解记忆
  2. 变量作用域明确
  3. 不会产生组件嵌套
----------------------------------------------------------------------------------------------
// Hooks 注意事项
1. 为什么要使用 Hooks
  1. 完善函数组件的能力，函数更适合 react 组件
  2. 组件逻辑复用，Hooks 表现更好
  3. 'class' 组件正在变的费解，不易拆解、不易测试、逻辑混乱
2. Hooks 命名规范
  1. 规定所有的 Hooks 都以 use 开头，如 useState
  2. 自定义 Hook 也要以 use 开头
  3. 非 Hooks 的地方，尽量不要使用 useXXX 写法
3. Hooks 使用规范
  1. 只能用于 React 函数组件和自定义 Hook 中，其他地方不可以
  2. 只能用于顶层代码，不能在循环、判断中使用 Hooks，也不能提前打断执行
  3. eslint 插件 selint-plugin-react-hooks
4. 为何 Hooks 要依赖于调用顺序？
  // 纯函数不会对其他全局的变量进行修改
  // 函数组件指的是引入 react、函数执行返回 jsx，和 class 组件不一样
  1. 函数组件，纯函数，执行完即销毁
    对于 useState 在 render 的时候是初始化 state 的值，在 re-render 的时候是读取 state 的值
    对于 useEffect 在 render 的时候是添加 effect 函数，在 re-render 的时候是替换 effect 函数（即内部函数重新定义）
    如果中间出现条件逻辑导致有时候执行 hook，有时候不执行，这样会导致 React 内部不知道当前的 state 或 effect 是属于哪个 hook
  2. 所以无论组件初始化（render）还是组件更新（re-render）
  3. 都会重新执行一次这个函数，获取最新的组件
  4. 无论是 render 还是 re-render，Hooks 调用顺序必须一致
  5. 如果 Hooks 出现在循环、判断里，则无法保证顺序一致
  6. Hooks 严重依赖于调用顺序！！！
5. React Hooks 注意事项（坑）
  1. useState 初始化值，只有第一次有效（调用顺序）
    1. 在第一次 render 的时候会初始化 state
    2. 在后面的 re-redner 的时候只会恢复初始化 state 的值，不会再重新设置新的值，
    3. 解决方案
        1. 只能用 setXXX 修改
    4. 示例，当点击按钮的时候，props name 变化了，但是 state name 不会变
        function Child({ userInfo }) {
            const [name, setName] = useState(userInfo.name)
            return <div>
                <p>props name: { userInfo.name }</p>
                <p>state name: { name }</p>
            </div>
        }

        function App() {
            const [name, setName] = useState('chenj')
            const userInfo = { name }
            return <div>
                <button onClick={() => setName('哈哈哈')}>按钮</button>
                <Child userInfo = { userInfo } />
            </div>
        }
  2. useEffect 内部不能修改 state // 依赖是空数组时
    1. 如果第二个参数传入的是个空数组，即模拟的是 DidMount 生命周期，里面的 state 即使在发生变化
       里面不会实时更新
    2. 解决方案
        1. setCount(count => count + 1)，修改时传入函数解决，而不是 setCount(count + 1)
    3. 示例
        import { useEffect, useState } from 'react'

        const HelloWorld = () => {
            const [count, setCount] = useState(0)

            useEffect(() => {
                const timer = setInterval(() => {
                // 方式一
                setCount(count + 1) // 错误
                setCount(count => count + 1) // 正确
                console.log('count', count)
                }, 1000)

                return () => clearInterval(timer)
            }, []) // 方式二，把依赖去掉，或加入 count 作为依赖

            // 依赖为 [] 时：re-render 不会重新执行 effect 函数
            // 没有依赖：re-render 会重新执行 effect 函数

            return <p>{count}</p>
        }

        export default HelloWorld
  3. useEffect 可能出现死循环
    1. 闭包
    2. 在第二个参数的数组里面如果传入的是引用类型的数据，即当这个引用类型的数据发生改变的时候
       会重新执行，又因为 react 在内部使用的是 Object.is() 这个方法进行比较是否有改变，当是
       值类型时能进行比较，而如果是引用类型，即使两个传入的数据是一模一样的，它判断后也是 false
       所以如果在数组中传入引用类型的数据，就会导致两个依赖判断一直都是 false，一直重新执行，死循环
    3. 解决方案
      1. 使用自定义变量 // 不推荐，打破了纯函数的规则
      2. 使用 useRef hook // 不止能获取 DOM 元素
      3. 把引用类型进行解构后放在依赖中
  4. hook 依赖需要注意引用类型数据避免无限循环，当非状态且是引用类型的变量放在依赖时就会出现无限循环
6. 什么时候该使用自定义 hook？
  1. 如果一个函数中需要使用 hook 则可以抽象成自定义 hook
  2. 如果一个函数中不需要使用 hook 则不需要抽象成自定义 hook
----------------------------------------------------------------------------------------------
// 面试真题
1. 组件之间如何通讯？
    1. 父子组件 props
    2. 自定义事件
    3. Redux 和 Context
2. JSX 本质是什么？
    1. createElement 函数
    2. 执行返回 vnode
3. Context 是什么，如何应用？
    1. 父组件，向其下所有子孙组件传递信息
    2. 如一些简单的公共信息：主题色、语言等
    3. 复杂的公共信息，请用 redux
4. shouldComponentUpdate 用途？
    1. 性能优化
    2. 配合不可变值一起使用，否则会出错
5. redux 单向数据流？
    1. view ——> action（中间件） ——> store ——> reducer ——> state
6.  什么是纯函数？
    1. 返回一个新值，没有副作用（不会偷偷修改其他值）
    2. 重点：不可变值
7. React 发起 ajax 应该在哪个生命周期中？
    1. componentDidMount
8. 渲染列表，为何使用 key？
    1. 同 vue，必须用 key，且不能是 index 和 random
    2. diff 算法中通过 tag 和 key 来判断，是否是 sameNode
    3. 减少渲染次数，提升渲染性能
9. 函数组件和 'class' 组件区别？
    1. 纯函数，输入 props，输出 JSX
    2. 没有实例，没有生命周期，没有 state
    3. 不能扩展其他方法
10. 何时使用异步组件？
    1. 同 vue
    2. 加载大组件
    3. 路由懒加载
11. 多个组件有公共逻辑，如何抽离？
    1.  高阶组件
    2.  render props
    3.  mixin 已被 react 废弃
12. redex 如何进行异步请求？
    1. 使用异步 action
    2. redux-chunk
    3. redux-saga
13. PureComponent 有什么用？
    1. 实现了浅比较的 shouldComponentUpdate
    2. 优化性能
    3. 结合不可变值使用
14. react 事件和 DOM 事件的区别？
    1. 所有事件挂载到 document 上
    2. event 不是原生的，是 SyntheticEvent 合成事件对象
15. react 如何做性能优化？
    1. 渲染列表时加 key
    2. 自定义事件、DOM 事件及时销毁
    3. 合理使用异步组件
    4. 减少函数 bind this 的次数
    5. 合理使用 SCU、PureComponent 和 memo
    6. 合理使用 Immutable.js
    7. webpack 层面的优化
    8. 前端通用的性能优化
    9. 使用 SSR
16. react 和 vue 的区别？
    1. 都支持组件化
    2. 都是数据驱动视图
    3. 都使用 vdom 操作 DOM
    4. react 使用 JSX 拥抱 js，vue 使用模板拥抱 html
    5. react 函数式编程（setState），vue 声明式编程（data）
    6. react 更多需要自力更生，vue 把想要的都给你