2.2 操作JSX

2.2.1 JSX与Element对象

JSX在编译阶段就会转换成createElement形式，执行createElement会得到ReactElement对象；

组件和元素的区别是，元素的type属性为对应的元素标签类型，组件的type属性为对应的组件函数或组件类本身(相同的内存空间)

2.2.2 Element方法集

1. cloneElement

   1. 作用：createElement作用是把开发者写的JSX转换成Element对象；cloneElement的作用则是以Element元素为样板克隆并返回新的React元素。返回元素的props是将新的props与原始元素的props千层哼后的结果

   2. 用法：

      React.cloneElement(
      	element,
          [props],
          [...children]
      )

      备注：

      1. element：需要克隆的element对象

      2. props：需要合并的props

      3. 其他children：新的Children元素，依次排列

2. isValidElement

   1. 可以用来判断是否为React Element对象

   2. 用法

      React.isValidElement(element)

      备注：

      1. element：待验证元素

      2. 返回true：是React Element对象，反之不是

3. Children方法集

   1. JSX闭合标签的内容叫做React Children，会绑定在闭合标签对应的Element的props属性上

   2. 举例：

      <WrapComponent>
      	<Text />
          <Text />
          <Text />
          <span>hello, world</span>
      </WrapComponent>

   3. WrapComponent组件会被转成Element结构，三个Text和一个span会绑定在element.props.children

   4. 这种数据结构无法正常遍历了，即便遍历也无法有效遍历到每一个元素，需要使用React.Children方法集来解决

4. React.Children.map

   1. 类似数组的map方法，返回一个新的Children数组

   2. 用法：

      React.Children.map(
      	children,
          fn
      )

   3. 示例

      function WrapComponent(props) {
          const newChildren = React.Children.map(props.children, (item)=>item)
          console.log(newChildren)
          return newChildren
      }

      备注：

      1. 上过上述操作，newChildren就变成了一个透明的数组结构；

      2. 如果Children是一个Fragment对象，它将被视为单一子节点，不会被遍历

5. React.Children.forEach

   1. 与React.Children.map用法类似，React.Children.map可以返回新的数，React.Children.forEach只停留在遍历阶段

   2. 示例：

      React.Children.forEach(props.children,(item)=>console.log(item))

6. React.Children.count

   1. 用于获取子元素的总数量，等同于map或forEach调用回调函数的次数；对于更复杂的结果，可以返回同一级别子组件的数量

   2. 示例

      const childrenCount = React.Children.count(props.children)
      console.log(childrenCount,'childrenCount')

7. React.Children.toArray

   1. 用于返回props.children扁平化的结果

   2. 示例：

      const newChildrenArray = React.Children.toArray(props.children)
      console.log(newChildrenArray, 'newChildrenArray')

   3. Children.toArray不但可以扁平化、规范化Children组成的数组，只要hildren中的数组元素被打开

   4. Children.toArray在展开子节点列表时，会更改key值，以保留嵌套数组的语义

8. React.Children.Only

   1. 验证Children是否只有一个子节点(一个React元素)，有，返回，否则报错

   2. 示例

      console.log(React.Children.only(props.children))

2.2.3 Element对象持久化

1. React应用更新的时候，本质上是通过createElement重新创建element对象，如果想要保存Element对象，下一次更新时不会被重新创建，可以将其保存下来编程持久化

2. 组件类实现：

   class Index extend React.Component {
       saveElement = <Text />
       rander(){
           return <div>
           	{this.saveElement}
           </div>
       }
   }

3. 函数组件useRef

   function Index() {
       const saveElement = React.useRef(<Text/>)
       return <div>{saveElement.current}</div>
   }

   注意：必须手动更新Element

4. 函数组件useMemo(推荐)

   function Index({value}){
       const saveElement = React.useMome(() => {
           return <Text/>
       },[value])
       return <div>{saveElement}</div>
   }

   备注：当依赖项value改变的时候，可以重新生成Text组件的Element对象