【7天造一个react】第二天，支持渲染复杂虚拟DOM树

快速开始

本篇文章将打你打造一个稍微复杂一点的react，它支持复杂虚拟dom树的渲染，我们先来看下最终的效果吧~

// 下载项目到本地
git clone git@github.com:murphywuwu/7-days-react.git

// 切换到hello-world目录
cd examples/list

// 安装依赖
yarn install

// 启动项目
yarn start 

应用代码如下：

🚀 启程

生成react元素

想要实现如上的渲染效果，我们可以推断出，虚拟dom树应该是如下所示的模样

// 复杂虚拟dom树
{
  type: 'ul',
  props: {
    children: [
      {
        type: 'li',
        props: {
          children: '1',
          style: {
            background: 'blue',          
          }
        }
      },
      {
        type: 'li',
        props: {
          children: '2',
          style: {
            background: 'pink',
          }
        },
      },
      {
        type: 'li',
        props: {
          children: '3',
          style: {
            xia: 'black',
          }
        },
      }
    ],
    style: 
      color: 'white'
    }
  }
} 

这个虚拟DOM树是如何生成的呢?

打开