一、创建一个react项目

创建项目(电脑上没有安装npm install -g create-react-app )
```
create-react-app 项目名称
```
安装axios
```
npm i axios
```
安装routers
```
npm i react-router-dom
```
安装ant-design组件库
```
npm i antd
```
安装sass样式
删除多余的文件
创建view文件夹，里面放置组件

按rafc创建一个函数组件代码

app.js里面导入组件以及路由

二、使用hooks的用法

1、useState使用

let [state,setState] = useState()
state为值，setState为改变值的方法

2、useEffect的使

还可以清除副作用

3.useRef的使用


export defaut function Demo(){
  const DemoRef = useRef()
  return (
    <div ref="DemoRef" onClick={()=>{
      console.log("打印出盒子的实例对象",DemoRef.current)
    }}>
     我是一个测试案例
    </div>
    )
}

4、useContext的使用

创建一Context.js的中间文件

import { createContext } from 'react'
export const Context = createContext()

2.父组件导入


import { Context } from '../../config/context'
//包裹着子组件，通过value传值
<Context.Provider value={{ topic, setTopic: changeTopic }}>
<Son nameObj={name} changeName={changeName}></Son>
</Context.Provider>

3、子组件的也导入

import React, { useContext } from 'react'
import { Context } from '../../config/context'
const Son = () => {
    let { topic, setTopic } = useContext(Context)
    return (
        <div>
            <button
                onClick={() => {
                    setTopic('我想去看看')
                }}
            >
                改变
            </button>
            <div>{topic}</div>
        </div>
    )
}

export default Son

组件通信

子传父

父组件

子组件 const Son = (props) => {

return (
    <div>
        他的名字叫{props.nameObj}
        <button
            onClick={() => {
                props.changeName('小明试试')
            }}
        >
            改变
        </button>
    </div>
)

}

父传子

父组件传递一个方法给子组件，让其改变

三、redux的使用

1.创建store文件夹

安装redux(npm i redux)

// store/index.js
//1.导入创建创建仓库
import { createStore } from 'redux'
//2.初始值
const initialState = {
    num: 100,
}
//函数处理
const reducer = (state = initialState, { type, payload }) => {
    switch (type) {
        case 'add':
            return { ...state, num: state.num + payload * 1 }
        case 'reduce':
            return state.num - payload
        default:
            return state
    }
}
// 创建以及暴露仓库
const store = createStore(reducer)
export default store

// store/actions/index
// 回调函数
export const add = (payload) => ({
    type: 'add',
    payload,
})

// 在需要提取数据的页面使用
import store from '../store'
// 获取数据
let [num,setNum] = store.getState().num
// 更改数据
store.dispatch(回调函数)
store.subscribe(回调函数) //监听仓库数据发生变化,获取最新的值

2、react-redux的使用

// index.js文件
// 1、导入provider组件、store仓库实例
import { Provider } from 'react-redux'
import store from './store'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    // 2、包裹App.vue组件，挂在store实例
    <Provider store={store}>
        <App />
    </Provider>
)

使用

// 1、导入useSelector跟useDispatch两个钩子
import {useSelector,useDispatch} from 'react-redux'
function 函数名称(){
  // 2、获取仓库里面的值
  const num = useSelector(回调函数，参数为仓库值得集合)
  // 3、获取触发修改的函数
  const dispatch = useDispatch()
}

创建一个react16.8+antd+redux项目

一、创建一个react项目

二、使用hooks的用法

三、redux的使用

2、react-redux的使用