一、基础知识 React API 一览

偏执的太偏执、 2021-12-24 01:37 231阅读 0赞

## 1.10 Hooks ##

参考文章：[https://juejin.im/post/5be3ea136fb9a049f9121014][https_juejin.im_post_5be3ea136fb9a049f9121014]

demo：

/**
 * 必须要react和react-dom 16.7以上
 */
 
 import React, { useState, useEffect } from 'react'
 
 export default () => {
 const [name, setName] = useState('jokcy')
 
 useEffect(() => {
 console.log('component update')
 
 return () => {
 console.log('unbind')
 }
 }, [])
 
 return (
 <>
 My Name is: {name}
 <input type="text" value={name} onChange={e => setName(e.target.value)} />
 </>
 )
 }

## 1.11 React.children ##

用法文章推荐：[https://www.jianshu.com/p/d1975493b5ea][https_www.jianshu.com_p_d1975493b5ea]

源码： [https://github.com/KieSun/Dream/issues/18][https_github.com_KieSun_Dream_issues_18]

[https://juejin.im/post/5cd557bbf265da03a97b0780][https_juejin.im_post_5cd557bbf265da03a97b0780]

demo：

import React from 'react'
 
 function ChildrenDemo(props) {
 console.log(props.children)
 console.log(React.Children.map(props.children, c => [c, [c, [c, c]]]))
 return props.children
 }
 
 export default () => (
 <ChildrenDemo>
 1
 2
 </ChildrenDemo>
 )

![1476644-20190623144440427-434392065.png][]

如果map的第二个参数返回的是一个数组，不管是多少层的，都会展开成一层的一个一维数组。

源码流程图：

![1476644-20190623144905996-604762633.png][]

首先在mapInfoWithKeyPrefixInternal中去对象重用池中取一个context，用完了会还回来的，然后到了traverseAllChildrenImpl去查看Children是不是一个数组或者一个可以遍历的对象,判断是不是多个节点，如果是单个节点，就到了mapSingleChild（不是的话就递归），这里调用调用我们自己传入的callBack函数。我们自己的callBack函数可能返回一个数组，或者是一个新的节点，这样我们就拿到一个map之后的节点，如果又是一个数组，又回到mapIntoWithKeyPrefixInternal.这样递归的话，就解释了上面的那个结果。

为什么要用重用池尼？因为在判断我们的callBack函数是不是返回数组的时候，如果是就递归调用mapIntoWithKeyPrefixInternal,这里面又得用到重用池，因此如果是返回两层数组，就得用到两个context，所以需要重用池。

## 1.12、React.memo&&React.Fragment&&React.cloneElement&&React.createFactory ##

React.memo用法参考：[https://www.jianshu.com/p/b3d07860b778][https_www.jianshu.com_p_b3d07860b778]

React.Fragment用法参考：[https://www.reactjscn.com/docs/fragments.html][https_www.reactjscn.com_docs_fragments.html]

React.createElement用法参考：[https://www.jianshu.com/p/2ccf0cd14388][https_www.jianshu.com_p_2ccf0cd14388]

转载于:https://www.cnblogs.com/QianDingwei/p/11072363.html

[https_juejin.im_post_5be3ea136fb9a049f9121014]: https://juejin.im/post/5be3ea136fb9a049f9121014
[https_www.jianshu.com_p_d1975493b5ea]: https://www.jianshu.com/p/d1975493b5ea
[https_github.com_KieSun_Dream_issues_18]: https://github.com/KieSun/Dream/issues/18
[https_juejin.im_post_5cd557bbf265da03a97b0780]: https://juejin.im/post/5cd557bbf265da03a97b0780
[1476644-20190623144440427-434392065.png]: /images/20211223/15488dca14204fbabc1004a754c59042.png
[1476644-20190623144905996-604762633.png]: /images/20211223/a5d1d9bd06644db196b428d29e75dbe3.png
[https_www.jianshu.com_p_b3d07860b778]: https://www.jianshu.com/p/b3d07860b778
[https_www.reactjscn.com_docs_fragments.html]: https://www.reactjscn.com/docs/fragments.html
[https_www.jianshu.com_p_2ccf0cd14388]: https://www.jianshu.com/p/2ccf0cd14388