渲染和数据分离
单独写一个提供数据的组件
数据组件的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 参数进行处理
-------------------------------------------------------------------------------------------------
useEffect函数
函数的主副作用
主作用:渲染jsx
副作用:发送ajax请求,设置定时器,操作dom
useEffect首次加载和每次更新都会执行(没有参数2,没有依赖项)
如果useEffct的第二个参数是[],只有第一次加载会执行,需要在某些值改变的时候也执行,
需要将值传入数组之中,也就是依赖项
padStart()字符串方法 第一个参数是几位,第二个参数是位数不足用什么字符替换,
padEnd()
useEffect加上定时器的时候要注意,需要加上依赖项
useRef
let xxref=useRef ()
节点采用 ref={xxref}标记节点 ,类组件可以使用 ,函数组件不可以
context
createContext,useContext
顶部创建一个
let Context=crateConetxt();
用<Context.Provider>包裹子标签
子标签中
用变量来接受
let b=useContext(useRef )这样就将值传递过去了
mobx
observable autorun
let num=observable(10)
autorun(()=>{
简单数据类型要使用.get()
复杂数据类可以直接打印
})
修改 简单数据类型 用set()方法
复杂数据类型直接修改本身的值就可以
|