React 进阶 - JSX

2023-05-17 20:44:12 浏览数 (2)

# React 里程碑

  • v16.0
    • 为了解决之前大型 React 应用一次更新遍历大量虚拟 DOM 带来的卡顿文件，React 重写了核心模块 Reconciler，启用 Fiber 架构
    • 为了让节点渲染到指定容器内，更好地实现弹窗功能，推出了 createPortal API
    • 为了捕获渲染中的异常，引入 componentDidCatch API，划分了错误边界
  • v16.2
    • 推出 Fragment，解决数组元素问题
  • v16.3
    • 增加 React.createRef() API，可以通过 React.createRef() 取得 Ref 对象
    • 增加 React.forwardRef() API，解决高阶组件 ref 传递问题
    • 推出新版本 context API，迎接 Provider / Consumer 时代
    • 增加 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 生命周期
  • v16.6
    • 增加 React.memo API，用于控制子组件渲染
    • 增加 React.lazy API，实现代码分割
    • 增加 contextType 让类组件更便捷使用 context
    • 增加生命周期 getDerivedStateFromError 代替 componentDidCatch
  • v16.8
    • 全新 React Hooks 支持，使函数组件也能做类组件的一切事情
  • v17
    • 事件绑定由 document 变成 container，移除事件池

# JSX 会变成什么

代码语言：javascript复制
const toLearn = ['react', 'vue', 'webpack', 'nodejs'];

const TextComponent = () => <div> hello , i am function component </div>;

class Index extends React.Component {
  status = false;
  renderFoot = () => <div> i am foot</div>;
  render() {
    return <div style={{ marginTop: '100px' }} className="container">
      <div>hello,world</div>
      <React.Fragment>
        <div> 


	


react jsx 对象 函数 数组 




	






	

 0 人点赞