react-api补漏

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>
//直接写死了,这就好办了,现在读到的是透明数据

1.png

2 .非透明数据

<WrapText>
               {[1,2,3,4].map((e)=>{
                   return <Text />
               })}
              <span>啦啦啦啦</span>
</WrapText>

2.png

//这样遍历的时候好像需要先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
}

3.png

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是否只有一个子节点,如果有就返回,没有就抛出错误