React.memo
1 . 是高阶组件，函数组件和类组件都可以使用， 和区别PureComponent是 React.memo只能对props的情况确定是否渲染，而PureComponent是针对props和state
import React from 'react'
interface MyProps {
time:string
}
// ts中子组件接收的参数需要这样规定
function upDateHook(pre:MyProps,next:MyProps){
if(pre.time!==next.time&&next.time.length>10){
// 在这里可以自由定制需要修改的条件,比如,前后不一样并且值满足别的其它条件才会出现.比如说一些节日活动的日期,就可以这样来控制
return false
// 表示子组件需要渲染
}
return true
// 表示子组件不需要渲染
}
export default React.memo((props:MyProps)=>{
console.log('TopSon 更新')
return (
<div>
h11
</div>
)
},upDateHook)
// 如果子组件是一个不传值的,单独隔离的,没有第二个参数
// 如果子组件是传值的,比如每次子组件都会收到
// export default function(){
// console.log('TopSon 更新')
// return (
// <div>
// h11
// </div>
// )
// }
forwardRef
1 .任何祖先元素获得孙子元素的div实例
//孙子组件
import React from 'react'
interface MyProps {
time:string,
otherRef?:any,
}
// ts中子组件接收的参数需要这样规定
function upDateHook(pre:MyProps,next:MyProps){
if(pre.time!==next.time&&next.time.length>10){
// 在这里可以自由定制需要修改的条件,比如,前后不一样并且值满足别的其它条件才会出现.比如说一些节日活动的日期,就可以这样来控制
return false
// 表示子组件需要渲染
}
return true
// 表示子组件不需要渲染
}
export default React.memo((props:MyProps)=>{
console.log('TopSon 更新')
return (
<div ref={props.otherRef}>
h11
</div>
)
},upDateHook)
// 如果子组件是一个不传值的,单独隔离的,没有第二个参数
// 如果子组件是传值的,比如每次子组件都会收到
// export default function(){
// console.log('TopSon 更新')
// return (
// <div>
// h11
// </div>
// )
// }
//接收的ref通过一个props传出去这里感觉是反向传递了
2 .父组件获取实例
let NewSon=React.forwardRef((props,ref)=><TopSon otherRef={ref} time={time} {...props}/>)
console.log(sonRef.current)
<NewSon ref={(node)=>sonRef.current=node as any} />
Lazy
const Main=React.lazy(()=>import('../src/main/main'))
<React.Suspense fallback={<div>loading</div>}>
<Main />
<React.Suspense />
1 .React.lazy 和Suspense配合一起用橘有动态加载组件的效果
2 .Suspense:让组件等待某个异步操作,直到该异步操作结束可以渲染,可以用Susoense 以声明的方式来等待任何内容,包括数据,可以是图片,脚本或者其他异步操作
3 .
Fragment
1 .Fragment 和<></>的区别是,Fragment支持key属性,<></>不支持
2 .map遍历后的元素,react底层会处理,默认在外部嵌套一个<Fragment/>元素
3 .
Profiler
1 .官方的chrome插件会提示渲染了多长时间,每次提交的时间,每次渲染的时间
2 .触发提交的数据是什么?当时我都试不出来..
3 .只能用这个组件来实现了
function handleRender(id,phase,actualDuration,baseDuration,startTime,commitTime,interactions){
console.log("测量id",id)
console.log('是否是重复渲染',phase)
console.log('本次花在commit的时间',actualDuration)
console.log('不使用memoization的情况下渲染整颗子树需要的时间',baseDuration)
console.log('本次更新中React开始渲染的时间',commitTime)
console.log('属于本次更新的interactions的集合',interactions)
}
<Profiler id="root" onRender={ handleRender } >
<Top />
</Profiler>
strict mode
1 .不会渲染任何可见的UI,只是对后代元素进行额外的检查和警告
2 .只会在生产模式下,不会影响生产构建
3 .识别不安全的生命周期.现在hook都不会使用生命周期了
4 .使用了过时的API,比如 ref API,findDOMNode警告
5 .检测意外的副作用
6 .检测过时的context api
工具类
createElement
1 .jsx被babel用createElement函数编译成React元素形式
render(){
return <div className="box" >
<div className="item" >生命周期</div>
<Text mes="hello,world" />
<React.Fragment> Flagment </React.Fragment>
{ /* */ }
text文本
</div>
}
//我们平时写的
2 .编译成的版本
render() {
return React.createElement("div", { className: "box" },
React.createElement("div", { className: "item" }, "\u751F\u547D\u5468\u671F"),
React.createElement(Text, { mes: "hello,world" }),
React.createElement(React.Fragment, null, " Flagment "),
"text\u6587\u672C");
}
3 .可以直接使用CreateElement开发
React.createElement(
type,
//组件类型,传入组件.DOM类型,传入div或者span
[props],
//一个对象,在dom中为各种属性,在组件中为props
[...children]
//所有的子节点.Children元素
)
CloneElemnt
1 .以element元素为样板克隆并返回新的React元素.返回元素的props键是新的Props与原始元素的props浅层合并后的结果
2 .常见场景:在一个组件中,挟持children,然后给childre赋予一些额外的props
3 .
function FatherComponent({ children }){
const newChildren = React.cloneElement(children, { age: 18})
return <div> { newChildren } </div>
}
function SonComponent(props){
console.log(props)
return <div>hello,world</div>
}
class Index extends React.Component{
render(){
return <div className="box" >
<FatherComponent>
<SonComponent name="alien" />
</FatherComponent>
</div>
}
}
createFactory
1 .生成指定类型React元素的函数.以被废弃
const Text = React.createFactory(()=><div>hello,world</div>)
function Index(){
return <div style={{ marginTop:'50px' }} >
<Text/>
</div>
}
createContext
1 .
isValiElement
class WarpComponent extends React.Component{
constructor(props){
super(props)
this.newChidren = this.props.children.filter(item => React.isValidElement(item) )
}
render(){
return this.newChidren
}
}
透明数据结构,非透明数据结构
1 .透明数据结构
function WrapText(props){
props.children.map((e)=>{
console.log(e,'打印子元素')
})
return props.children
}
function Text(){
return (
<div>
hello, world
</div>
)
}
<WrapText>
<Text />
<Text />
<Text />
<Text />
</WrapText>
//直接写死了,这就好办了,现在读到的是透明数据
2 .非透明数据
<WrapText>
{[1,2,3,4].map((e)=>{
return <Text />
})}
<span>啦啦啦啦</span>
</WrapText>
//这样遍历的时候好像需要先merge一下
React.children.map()
1 .可以返回新的数据
function WrapText(props){
props.children.map((e)=>{
console.log(e,'打印子元素')
})
console.log('处理之前')
const newChild=React.Children.map(props.children,(item)=>item)
newChild.map((e)=>{
console.log(e,'打印子元素')
})
return props.children
}
Children.forEach
1 .仅仅停留在遍历的阶段
Children.count
1 .children中组件总数量,等同于通过map或forEach调用回调函数的次数
Children.toArray
1 .返回props.children扁平化的结果
2 .有点类似于merge对象
3 .在拉平展开子节点列表时，更改 key 值以保留嵌套数组的语义。也就是说， toArray 会为返回数组中的每个 key 添加前缀，以使得每个元素 key 的范围都限定在此函数入参数组的对象内
Children.only
1 .验证children是否只有一个子节点,如果有就返回,没有就抛出错误
