「掘金日新计划 · 8 月更文挑战」的第10天—react的基础回顾下

菜菜子园子
144 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

image.png

React Hooks

1.React Hooks解决了什么问题？

  • 函数组件不能使⽤state
    React Hooks让我们更好的拥抱函数式编程，让函数式组件也能使⽤state功能，
  • 副作⽤问题
    使⽤useEffffect来处理组件副作⽤问题
  • 有状态的逻辑重⽤组件
    可以用函数组件去封装
  • 复杂的状态管理
    之前使⽤redux、dva、mobx第三⽅状态管理器来进⾏复杂的状态管理,现在可以使⽤useReducer、useContext配合使⽤实现复杂状态管理，不⽤再依赖第三⽅状态管理器
  • 开发效率和质量问题
    ⽐class组件简洁，开发的体验更好，效率更⾼，同时应⽤的性能也更好

2.新特新

  • useState---组件状态管理钩⼦
    1)作用：useState能使函数组件能够使⽤state
    2)基本使用：
const [state,setState]=useState(initState)
//state是要设置的状态
//setState是更新state的⽅法，只是⼀个⽅法名，可以随意更改
//initState是初始的state，可以是随意的数据类型，也可以是回调函数，但是函数必须是有返回值
  • useEffect---副作⽤处理钩⼦
    1)作用：useEffect也是componentDidMount、componentDidUpdate和componentWillUnmount这⼏个 ⽣命周期⽅法的统⼀
    2)基本使用：
useEffect(callback,array)
//callback: 回调函数，作⽤是处理副作⽤逻辑
//array(可选参数)：数组，⽤于控制useEffffect的执⾏
//分三种情况
1.空数组，则只会执⾏⼀次（即初次渲染render）,相当于componentDidMount
2⾮空数组，useEffffect会在数组发⽣改变后执⾏
3不填array这个数组，useEffffect每次渲染都会执⾏
  • useContext
    1)作用：针对context上下⽂提出的⼀个Hooks提出的⼀个API，它接受React.createContext()的返回值作为参数，即context对象，并返回最近的context
    2)注意：
    1.使⽤useContext是不需要再使⽤Provider和Consumer的
    2.当最近的context更新时，那么使⽤该context的hook将会重新渲染 3)基本使用：
const Context=React.createContext({age:'18',name:'miaozai'})

//组件1
const AgeComp= () =>{
//使⽤useContext
const ctx =useContext(Context)
return(
<div>年龄：{ctx.age}岁</div
)
}
  • useReducer
    useReducer是useState的⼀个增强体，可以⽤于处理复杂的状态管理
    1)作用：
    useReducer可以完全替代useState，只是我们简单的状态管理⽤useState⽐较易⽤，useReducer的设计灵感源⾃于redux的reducer
    2)基本使用：
//useState的使⽤⽅法
const [state,setState]=useState(initState)

//useReducer的使⽤⽅法
const[state,dispatch]=useReducer(reducer,initState,initAction)

3)useReducer的参数介绍: reducer是⼀个函数，根据action状态处理并更新state
initState是初始化的state
initAction是useReducer初次执⾏时被处理的action

返回值state，dispath介绍:
state状态值
dispatch是更新state的⽅法，他接受action作为参数

  • useMemo
    1)作用：⽤于性能优化，通过记忆值来避免在每个渲染上执⾏⾼ 开销的计算 2)使用场景： 适⽤于复杂的计算场景，例如复杂的列表渲染，对象深拷⻉等 场景 3)基本使用
const memoValue =useMemo(callback,array)
//callback是⼀个函数⽤于处理逻辑
//array 控制useMemo重新执⾏的数组，array改变时才会重新执⾏useMemo
//useMemo的返回值是⼀个记忆值，是callback的返回值

4)注意： 不能在useMemo⾥⾯写副作⽤逻辑处理，副作⽤的逻辑处理放在useEffect内进⾏处理

  • UseCallback
    1)作用：⽤于性能优化
    2)基本使用
const memoCallback= useCallback(callback,array)
//callback是⼀个函数⽤于处理逻辑
//array 控制useCallback重新执⾏的数组，array改变时才会重新执⾏useCallback
//跟useMemo不⼀样的是返回值是callback本身，⽽useMemo返回的是callback函数的返回值
  • useRef 1)作用：⽅便访问操作dom 2)基本使用：
const UseRefComp=()=>{
//创建ref
const inputRef=useRef()

const getValue= () => {
//访问ref
console.log(inputRef.current.value)
}

//挂载
return (
<div>
    <input ref={inputRef} type="text">
    <button onClick={getValue}>获取input的值</button>
</div>

)

}

3.React Hooks的使⽤规则
(1)只在顶层调⽤Hooks
不要在循环，条件或者是嵌套函数中调⽤Hook，否则可能会⽆ 法确保每次组件渲染时都以相同的顺序调⽤Hook
(2)只在函数组件调⽤Hooks
只⽀持函数组件，所以⼤家别在class组件或者普通的函数⾥⾯调⽤Hook钩⼦函数
(3)React Hooks的应⽤场景:
1.函数组件
2.⾃定义hooks

状态管理器Redux

Redux成员及其数据流

  • actions
    actions其实是描述操作的对象，我们调⽤dispatch时需要传⼊此对象

  • store
    store是整个应⽤的数据存储仓库，把全局管理的状态数据存储起来

  • reducers
    reducers接收action并更新store

React封装的react-redux

1.安装：npm install react-redux --save 2.React-redux提供了两个api供我们使⽤

  • Provider 顶级组件，功能为给我们提供数据
  • connect ⾼阶组件，功能为提供数据和⽅法

路由react-router(版本4.x)

1.安装：npm install react-router-dom --save

2.特点：
1). 秉承react⼀切皆组件，路由也是组件
2). 分布式的配置，分布在你⻚⾯的每个⻆落
3). 包含式配置，可匹配多个路由

3.引⼊路由组件

  • 引⼊Link组件编写路由导航\
<Link to="/">⾸⻚</Link>
// to 指定跳转去的路径
  • 引⼊Route组件编写导航配置
<Route exact path="/" component={Home}></Route>
//path 配置路径
//component 配置路径所对应的组件
//exact 完全匹配，只有路径完全⼀致时才匹配
  • 编写导航配置对应的component组件

4.路由传参取参

  • 声明式导航路由配置时配置路由参数
//配置
<Route path="/detail/:course" component={Detail}></Route>

//传递
<Link to="/detail/react">react</Link>

//获取
//解构路由器对象⾥的match出来(macth获取参数信息)
{match.params.course}
  • 编程式导航式传递参数与获取
//配置
//解构路由器对象获取到导航对象 history(⽤作命令式导航)

//传递
//通过事件执⾏history.push传递的参数装载在state⾥⾯

//获取
从路由信息解构出location(当前的url信息)对象location.state进⾏获取

5.嵌套路由及路由重定向

//嵌套路由（嵌套的⼦路由需要跟随⽗路由且不设置确切匹配）
<Link to="/mine/userinfo">个⼈信息</Link>

//重定向
<Redirect to="/mine/userinfo"></Redirect>
avatar
文章
阅读
粉丝