我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

梁洁---20230202---react第五天

[复制链接]
梁杰,你好 发表于 2023-2-2 23:39:13 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
渲染和数据分离
单独写一个提供数据的组件
数据组件的render里面 直接return父函数传给组件的render方法,将数据回传给父组件,
父组件在付给方法的时候使用行内的方法,直接在方法中return业务逻辑的实现代码
将提供数据的组件单独抽离出来,这样就可以做到复用

children

this.props.

高阶组件:
采用包装模式实现组件的复用,
高阶组件是一个函数,接受一个组件,返回一个功能更强大的组件

function   XXX  (){
class App  extends  React.component{
        render(){
        return(
div);
}
}

return App;
}
可以给XXX 传入组件参数,用App来调用

App数据和传入的组件都能使用

多次嗲用方法返回的时候   ,无法区分名字,
可以利用App组件的displayName属性修改,
每次调用参数组件的名字加上app组件的名字

前端路由就是一个url对应一个组件

安装 npm  i  react-router-dom@5

导入  结构  import  {Link ,BrowserRouter,Route}

<BrowserRouter>
<Link to='/xxx'></Link>
<Route path='' component={导入的组件}></Route>
</BrowserRouter>

link就相当于a标签 但是a标签会刷新页面

路由组件和一般组件
url地址匹配的组件,通常是一个页面或者页面最重要的那个部分
一般组件不会和url产生关系,只是在某些组件中进行调用

路由组件才有history
一般组件  需要引入  withRouter方法  包裹就会有history

路由采用的是模糊匹配  
需要完全匹配需要在route 的path属性前面加上exact


hook   16.8.4

从react里面结构userState

const   [数值,改变数值的方法]=useState(数值的初始值)
usestate使用规则
1、数值个改变数字方法可以随意命名,但是最好有语义化
2、一个useState只能解析一个数值和方法
3、useState在函数组件中可以多次的使用   
4、可以使用常用的所有数据类型
5、不能在if  else流程控制语句和佛如循环中使用 usestate
6、不能在内部函数中使用usestate

创建阶段执行  usestate   和渲染
更新阶段执行 改变方法  和渲染 不会执行userstate

usestate回调函数是为了赋值一起拿可处理更复杂的逻辑
改变数值的方法也可以是回调函数    里面的有一个参数, return  参数进行处理


回复

使用道具 举报

关注0

粉丝0

帖子77

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026