渲染和数据分离
单独写一个提供数据的组件
数据组件的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 参数进行处理
|