React新版扩展特性

目录

Hooks

三个常用的Hook

State Hook

 Effect Hook

 Ref Hook

 Context

 Router 6

声明式路由

 编程式路由导航

---

Hooks

(1) Hook是react 18.8.0版本新增的特性/语法

(2) 可以让我们在函数式组件中使用state以及其他的react特性

三个常用的Hook

(1) State Hook: React.useState()

(2) Effect Hook: React.useEffect()

(3) Ref Hook: React.useRef()

State Hook

(1) State Hook 让函数组件也可以有state状态 并进行状态数据的读写操作

(2) 语法: const[变量名,set修改变量的方法] = React.useState(initvalue)

(3) useState()说明:

             参数: 第一次初始化指定的值在内部作缓存

             返回值: 包含两个元素的数组 第一个为内部当前状态的值 第二个为更新状态值的函数方法

(4) setXXX()2种写法:

         setXXx(newValue) : 参数为非函数值  直接指定新的状态值 内部用其覆盖原来的状态值

         setXXx(value=> newValue) : 参数为函数 接收原来的状态值 返回新的状态值 内部用其覆盖原来的状态值

先使用传统的类式组件来进行数据处理然后进行比对

类式组件:

 

函数式组件:

 测试

 Effect Hook

(1) Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)

(2) React中的副作用操作:

              发ajax请求数据操作

             设置订阅 /启动定时器

              手动更改真实Dom

(3) 语法和说明:

               useEffect(()=>{

                //执行副作用操作

                return ()=>{

                 //在组件卸载前执行

                // 在此做一些收尾工作 比如清除定时器 /取消订阅等

}

},[stateValue] //如果指定的是[],回调函数只会在第一次render()后执行)

(4) 可以把useEffect Hook 看做如下三个函数的组合:

    componentDidMount()  组件要挂载时执行

    componentDidUpdate()   组件更改时执行

    componentWillUnmount()  组件要卸载前执行

类式组件写法:

 

测试

 函数式写法:

 测试:

 Ref Hook

使得函数式组件也可以像类式组件一样使用ref

类式组件:

 测试

函数式:

 测试

 

 Context

一种组件间通信方式 常用于[祖父组件] 与[后代组件]间通信

使用:

(1) 创建 Context容器对象

    const xxxContext = React.createContext()

(2) 渲染子组件时 外面包裹 xxxContext.Provider 通过value属性给后代组件传递数据

<xxxContext.Provider value={数据}>

     子组件

</xxxContext.Provider> 

(3) 后代组件读取数据:

    第一种方式: 仅适用类组件方式:

   static contextType = xxxContext //声明接收 context

   this.context //读取context中的value数据

//第二种方式: 函数组件类组件都适用

<xxxContext.Consumer>

    {

       value=>(//value就是context中的value数据)

      要显示的内容

    }

</xxxContext.Consumer>

先看下使用props传递方式.父->子->孙

可以看到,如果想把父组件App的名字传递给孙组件Cpp,如果使用props的话需要一层一层进行props传递,而且在每一层还需要再次声明接收,这样很不方便

如果使用context可以直接将数据由父->子

 

 函数式写法:

 Router 6

React Router以三个不同的包发布到npm上 分别为:

(1) react-router:路由的核心库 提供了很多的组件和钩子

(2) react-router-dom:包含react-routerd所有的内容 并添加一些专门用于Dom的组件 例如:<BrowerRouter>

(3) react-router-native:包括了react-router所有内容 并添加一些专门用于Reactnative的api 例如:<NativeRouter>

与router5版本相比 主要变化:

(1) 内置组件的变化:移除<Switch/> 新增<Routers/>等

(2) 语法的变化: component={组件名} 变为 element={<组件名/>}

(3) 新增多个hook: userParams,useNavigate,useMatch等

(4) 官方明确推荐使用函数式组件

声明式路由

代码示例:

首先安装最新6路由

npm i react-router-dom

 定义两个子组件

 

 再封装一个包裹组件容器

 

 测试

 

 如果有许多页面组件需要路由配置时,可以直接将路由组件的配置进行提取成单个路由表文件进行解耦

 还可以进一步提取,将配置的路由表单独提取为一个文件

引入router表文件

 效果和之前写法一样

嵌套路由并传参

 

 shop父组件,嵌套Message和news组件,Message组件再嵌套Detail组件,message组件传参到detail组件进行显示测试

params传参:

定义路由规则:

 

detail进行接参时有两种方式,可以直接进行userParams解构,也可以使用useMatch进行解析,两者稍有区别

 

测试

 

 可以看到参数的话可以直接从useParams中进行解析,而如果使用useMatch的话还需要进行路径和参数占位,并且取出的数据并不可以直接解构取数

所以一般情况下还是useParams中使用较多

search传参:

search传参不需要在路由文件中路径上进行参数占位 传参时可以直接进行拼接传参

传参 

 接参

 测试

 

 可以看到useSearchParams和useLocation都可以取到参数,区别就是useSearchParams解构得到的是map类型的参数和更改参数的方法,useLocation得到的是参数拼接的字符串,如果想要使用参数还需要进一步的解析字符串

state传参

state传参和search传参一样在路由路径中不需要再配置参数占位,所以路由路径不用动

 

从useLocation()的state属性中进行参数的解析

测试

 

 编程式路由导航

router6中提供useNavigate()接口来优化router5的编程式导航

注意:编程式导航传参只能传递state形式的参数,search和params形式参数直接拼在路径上即可

测试

 控制页面前进后退

之前router5版本中如果想让一般组件也有路由组件的history的话是需要使用withOutr标签的,6版本的路由不需要这么麻烦,也是直接使用useNavigate就可以解决

先建一个一般组件

 

 

测试