React APIs

React.createClass 用于注册一个组件

The deprecations introduced in 15.x have been removed from the core package.

React.createElement

创建并返回指定类型的新 React 元素。
其中的类型参数既可以是标签名字符串（如 ‘div’ 或 ‘span’），也可以是 React 组件 类型 （class 组件或函数组件），或是 React fragment 类型。
使用 JSX 编写的代码将会被转换成使用 React.createElement() 的形式。

React.createElement(
  type,
  [props],
  [...children]
)

eg.

React.createElement(
	'<>', // fragment 类型
	{className: 'antd-form'},
	react.createElemtn(
		FormComponent,
		{
			data: ['name': 'hel']
		}
	),
	React.createElement(
		'li', // 标签字符串
		null,
		'hello react'
	)
)

ReactDOM.render()

React16 render vs React18 render

// react16
import react from 'React'
import ReactDom from 'react-dom'

ReactDOM.render(<>...</>, document.getElementById('root'))

---

// React18
import react from 'React'
import ReactDOM from 'react-dom/client'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<>...</>)

createElement and render 手动实现

在 React 18 中，render 函数已被 createRoot 函数所取代。

React 条件渲染

设计人员创建不同的组件来封装各种业务需求，然后依据需求的不同状态，渲染对应状态下的局部内容

1. 使用 if 条件判断，分别渲染两种状态下的组件
2. 逻辑与运算符条件渲染

react 创建、转换、使用列表
React 列表中使用 key 帮助 react 框架识别元素的改变，识别一个元素 key 最好是在其所在列表中独一无二
React 特取有效性，key 值权权会传递信息给 React 框架，用户的自定义组件无法读取
React 表单与HTML表单默认行为相同，在 React 环境中执行 HTML 代码仍然有效

Children

Children lets you manipulate and transform the JSX you received as the children prop.
Children 可以操作和转换 props.children 中接收到的 JSX

卡槽了解一下

就是我们通常需要传递结构给子组件，将组件的子元素传递给子组件，如下：

• 先从子组件调用的方法说起吧

  // index.js
  <Com /> // 第一种
  <Com><div>结构</div></Com> // 第二种
  <Com><div>结构一</div><div>结构二</div></Com> // 第三种

---

// com.js
function Com(props){
	// children 可能存在 3 种情况：children = undefined; children = Object;  children => Array
	let {children} = props
	
	// 需求： children.length > 1 时，children[0] 和 children[1] 分别渲染在页面顶部和页面底部

	return <>
		{children[0]}
		<div>页面内容</div>
		{children[1]}
	</>
}

children.length > 1 时，children[0] 和 children[1] 分别渲染在页面顶部和页面底部
props.children 可能存在 3 类值：children = undefined; children = Object; children => Array，所以现在需要处理的问题兼容处理 children 取值问题

方法1：

// com.js
function Com(props){
	// children 可能存在 3 种情况：children = undefined; children = Object;  children => Array
	let {children} = props
	
	// 需求： children.length > 1 时，children[0] 和 children[1] 分别渲染在页面顶部和页面底部
	if (!children) {children = []}
	if (children.length === 1) {children = [children, null]}

	return <>
		{children[0]}
		<div>页面内容</div>
		{children[1]}
	</>
}

方法2：children = Children.toArray(children)

// com.js
import {Children} from 'react'
function Com(props){
	// children 可能存在 3 种情况：children = undefined; children = Object;  children => Array
	let {children} = props
	
	// 需求： children.length > 1 时，children[0] 和 children[1] 分别渲染在页面顶部和页面底部
	children = Children.toArray(children)

	return <>
		{children[0]}
		<div>页面内容</div>
		{children[1]}
	</>
}

children.forEach 的使用案例

使用具名 slot 对父组件传递的插槽进行分类

// com.js
import {Children} from 'react'
function Com(props){
	// children 可能存在 3 种情况：children = undefined; children = Object;  children => Array
	let {children} = props, headerSlot=[], footSlot=[], otherSlot=[]
	
	// 需求： children.length > 1 时，children[0] 和 children[1] 分别渲染在页面顶部和页面底部
	Children.forEach(children, element => {
		console.log(element)
		const {slot} = element.props
	})

	return <>
		{children[0]}
		<div>页面内容</div>
		{children[1]}
	</>
}

ReactDOM.createRoot()

createRoot(container[, options]);

Create a React root for the supplied container and return the root. The root can be used to render a React element into the DOM with render:
为提供的容器创建React根并返回根。根可以用于通过render将React元素渲染到DOM中：

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));

The root can also be unmounted with unmount:

root.unmount();