//两种调用方式
<Component/> //单闭合调用

<Component> ... </Component> //双闭合调用
//双闭合调用内可以放子节点，在传递函数的props时，会有一个children属性来存储这些子节点。

React.createElement(DemoOne, {
  title: "zono",
  x: 10,
  data: [100, 200],
  className: "box",
  style: {
    fontSize: "20px",
  },
});

// src\index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import DemoOne from '@/views/DemoOne';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <>
        <DemoOne title="可以看见成功传入了值" x={10}>
            <span>哈哈哈</span>
            <span>呵呵呵</span>
        </DemoOne>

        <DemoOne title="尝试传入不同的值，实现了组件的复用，注意要用<></>包起来" />
    </>
);

// src\views\DemoOne.jsx
import PropTypes from 'prop-types';

const DemoOne = function DemoOne(props) {
    let { title } = props;//从父组件取值
    let x = props.x;
    x = 1000;

    return <div className="demo-box">
        <h2 className="title">{title}</h2>
        <span>{x}</span>
    </div>;
};
/* 通过把函数当做对象，设置静态的私有属性方法，来给其设置属性的校验规则 */
DemoOne.defaultProps = {
    x: 0
};
DemoOne.propTypes = {
    //组件属性：校验格式
    title: PropTypes.string.isRequired,// 类型是字符串、必传
    x: PropTypes.number,// 类型是数字
    y: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.bool,
    ])// 多种校验规则中的一个
};

export default DemoOne;

/*
@Date		:2023/12/04 15:56:37
@Author		:zono
@Description:一个简单的JSX处理器
*/

/*createElement函数:用于构建虚拟DOM
----------------------------------------
1.参考react的createElement函数：
React.createElement(ele,props,...children)
- ele：元素标签名\组件名
- props：元素的属性集合(对象)（无属性，则此值为null）
- children：当前元素的子节点，第三个及以后的参数都是
- 返回虚拟DOM，可以看下文虚拟DOM结构
----------------------------------------
2. 参考react输出的虚拟DOM： 
virtualDOM = {
    $$typeof: Symbol(react.element), //react元素的标识
    ref: null,
    key: null,
    type: 标签名「或组件」, //h1、h2...
    // 存储了元素的相关属性 && 子节点信息
    props: {
        ..., // 元素的相关属性,如：className、style,
        children // 子节点信息（没有子节点则没有这个属性、属性值可能是一个值、也可能是一个数组）
    }//必定存在，至少是个空对象
  }
----------------------------------------
*/
export function createElement(ele, props, ...children) {
  let virtualDOM = {
    $$typeof: Symbol.for("react.element"),
    ref: null,
    key: null,
    type: null,
    props: {},
  };
  let len = children.length;

  // 1.处理type
  virtualDOM.type = ele;

  // 2.处理props
  if (props) {
    virtualDOM.props = {
      ...props,
      children,
    };
  }

  // 3.处理children
  if (len === 1) virtualDOM.props.children = children[0];
  else if (len > 1) virtualDOM.props.children = children;
  else virtualDOM.props.children = null;

  return virtualDOM;
}

// import React from "react";
import ReactDOM from "react-dom/client";
import "./index.less";
import { createElement,  } from './myJSXhandle';

const root = ReactDOM.createRoot(document.getElementById("root"));

let styObj = {
    color: 'red',
    fontSize: '16px'
};
let x = 10;
let y = 20;

//把react.createElement方法改成自己的方法
//把react.Fragment改为直接填写
//可以见到react已经没有被调用了
let jsxObj = createElement(
    //   React.Fragment,
    "div",
  null,
  createElement(
      "h2",
    {className: "title",
     style: styObj,},
    "zono"
  ),
  createElement(
    "div",
    {className: "box",},
    "牛",
    createElement("span", null, x),
    createElement("span", null, y)
  )
);

console.log(jsxObj);

root.render(jsxObj);

/*part2.render函数：把虚拟DOM变为真实DOM（按v16），构建思路如下
\----------------------------------------
1.首先根据ReactDOM.render方法构建大体结构
ReactDOM.render(virtualDOM, container)
\----------------------------------------
2.由于函数涉及到递归对象取值，所以先定义一个对象迭代器,见下文
*/

let function iterator(obj) {
  let arr = [];
  for (let key in obj) {
    arr.push([key, obj[key]]);
  }
  return arr;
}

export function render(virtualDOM, container) {
  //获取虚拟DOM的类型
  let { type, props } = virtualDOM;
  //1. type处理
  if (typeof type === "string") {
    let ele = document.createElement(type); //动态创建一个string标签
    // 2.props处理：构建回调函数为标签设置相关的属性 & 子节点，然后传入之前写好的对象迭代器
    each(props, (value, key) => {

      /*TODO为元素设置属性（自定义、内置）有两种方式（待回看）
      1. 元素.属性=属性值
      原理：内置属性是设置在元素标签上的（可以通过元素对象获取到），
        自定义属性是设置在元素对象上，在对象的堆内存空间中新增成员（不会设置到标签上）
      获取：元素.属性
      删除：delete 元素.属性

      2. 元素.setAttribute(属性名,属性值)
      原理：会直接写在元素的标签上
      获取：元素.getAttribute(属性名)
      删除：元素.removeAttribute(属性名)
      二者不能混淆（排除内置属性的特殊性）
      */
      
      // 2.1className的处理：value存储的是样式类名
      if (key === "className") {
        ele.className = value;
        return;
      }

      // 2.2.style的处理：value存储的是样式对象
      if (key === "style") {
        each(value, (val, attr) => {
          ele.style[attr] = val;
        });
        return;
      }

      // 2.3.子节点的处理：value存储的children属性值
      if (key === "children") {
        let children = value;
        if (!Array.isArray(children)) children = [children];//如果不是数组，就包装成数组
        children.forEach((child) => {
          // 子节点是文本节点：直接插入即可
          if (/^(string|number)$/.test(typeof child)) {
            //.test():用于检测字符串是否匹配某个正则表达式，返回true/false
            ele.appendChild(document.createTextNode(child));//创建文本节点,并插入到标签中
            return;
          }
          // 子节点又是一个virtualDOM：递归处理
          render(child, ele);
        });
        return;
      }

      ele.setAttribute(key, value);
    });
    // 把新增的标签，增加到指定容器中
    container.appendChild(ele);
  }
}

//src\jsxHandle.js
/*
@Date		:2023/12/04 15:56:37
@Author		:zono
@Description:一个简单的JSX处理器
*/

/*part1.createElement函数:用于构建虚拟DOM
----------------------------------------
1.参考react的createElement函数：
React.createElement(ele,props,...children)
- ele：元素标签名\组件名
- props：元素的属性集合(对象)（无属性，则此值为null）
- children：当前元素的子节点，第三个及以后的参数都是
- 返回虚拟DOM，可以看下文虚拟DOM结构
----------------------------------------
2. 参考react输出的虚拟DOM： 
virtualDOM = {
    $$typeof: Symbol(react.element), //react元素的标识
    ref: null,
    key: null,
    type: 标签名「或组件」, //h1、h2...
    // 存储了元素的相关属性 && 子节点信息
    props: {
        ..., // 元素的相关属性,如：className、style,
        children // 子节点信息（没有子节点则没有这个属性、属性值可能是一个值、也可能是一个数组）
    }//必定存在，至少是个空对象
  }
----------------------------------------
*/
export function createElement(ele, props, ...children) {
  let virtualDOM = {
    $$typeof: Symbol.for("react.element"),
    ref: null,
    key: null,
    type: null,
    props: {},
  };
  let len = children.length;

  // 1.处理type
  virtualDOM.type = ele;

  // 2.处理props
  if (props) {
    virtualDOM.props = {
      ...props,
      children,
    };
  }

  // 3.处理children
  if (len === 1) virtualDOM.props.children = children[0];
  else if (len > 1) virtualDOM.props.children = children;
  else virtualDOM.props.children = null;

  return virtualDOM;
}

/*part2.render函数：把虚拟DOM变为真实DOM（按v16），构建思路如下
----------------------------------------
1.首先根据ReactDOM.render方法构建大体结构
ReactDOM.render(virtualDOM, container)
----------------------------------------
2.由于函数涉及到递归对象取值，所以先定义一个对象迭代器,见下文
*/

/*定义一个对象迭代器:封装一个对象迭代的方法 
  - 基于传统的for/in循环，会存在一些弊端「性能较差(既可以迭代私有的，也可以迭代公有的)；只能迭代“可枚举、非Symbol类型的”属性...」
  + 解决思路：获取对象所有的私有属性「私有的、不论是否可枚举、不论类型」
    + Object.getOwnPropertyNames(arr) -> 获取对象非Symbol类型的私有属性「无关是否可枚举」
    + Object.getOwnPropertySymbols(arr) -> 获取Symbol类型的私有属性
    获取所有的私有属性：
      let keys = Object.getOwnPropertyNames(arr).concat(Object.getOwnPropertySymbols(arr));
    可以基于ES6中的Reflect.ownKeys代替上述操作「弊端：不兼容IE」
      let keys = Reflect.ownKeys(arr);
*/
const each = (obj, callback) => {
  // 1.参数校验,如果不是对象或者是null，直接抛出异常
  if (obj === null || typeof obj !== "object")
    throw new TypeError("obj is not a object");
  // 2.获取对象所有的私有属性「私有的、不论是否可枚举、不论类型」
  let keys = Reflect.ownKeys(obj);
  // 3.遍历所有的私有属性,每次迭代都执行回调函数
  keys.forEach((key) => callback(obj[key],key));
};

/*定义一个创建真实DOM的函数
这里先不对ref（获取真实DOM）和key（用于优化）进行处理

分析后函数任务就是：
先根据type创建一个标签，然后把props中的属性设置给标签，最后把标签插入到指定的容器中。

于是接下来按步骤处理：
- type：标签名
props中的属性进行处理（粗略）
- className
- style
- children
*/
export function render(virtualDOM, container) {
  //获取虚拟DOM的类型
  let { type, props } = virtualDOM;
  //1. type处理
  if (typeof type === "string") {
    let ele = document.createElement(type); //动态创建一个string标签
    // 2.props处理：构建回调函数为标签设置相关的属性 & 子节点，然后传入之前写好的对象迭代器
    each(props, (value, key) => {

      /*TODO为元素设置属性（自定义、内置）有两种方式（待回看）
      1. 元素.属性=属性值
      原理：内置属性是设置在元素标签上的（可以通过元素对象获取到），
        自定义属性是设置在元素对象上，在对象的堆内存空间中新增成员（不会设置到标签上）
      获取：元素.属性
      删除：delete 元素.属性

      2. 元素.setAttribute(属性名,属性值)
      原理：会直接写在元素的标签上
      获取：元素.getAttribute(属性名)
      删除：元素.removeAttribute(属性名)
      二者不能混淆（排除内置属性的特殊性）
      */
      
      // 2.1className的处理：value存储的是样式类名
      if (key === "className") {
        ele.className = value;
        return;
      }

      // 2.2.style的处理：value存储的是样式对象
      if (key === "style") {
        each(value, (val, attr) => {
          ele.style[attr] = val;
        });
        return;
      }

      // 2.3.子节点的处理：value存储的children属性值
      if (key === "children") {
        let children = value;
        if (!Array.isArray(children)) children = [children];//如果不是数组，就包装成数组(对象方法少)
        children.forEach((child) => {
          // 子节点是文本节点：直接插入即可
          if (/^(string|number)$/.test(typeof child)) {
            //.test():用于检测字符串是否匹配某个正则表达式，返回true/false
            ele.appendChild(document.createTextNode(child));//创建文本节点,并插入到标签中
            return;
          }
          // 子节点又是一个virtualDOM：递归处理
          render(child, ele);
        });
        return;
      }

      ele.setAttribute(key, value);
    });
    // 把新增的标签，增加到指定容器中
    container.appendChild(ele);
  }
}

//src\index.jsx
// import React from "react";
// import ReactDOM from "react-dom/client";
import "./index.less";
import { createElement,render  } from './myJSXhandle';
// import { createElement, render } from './jsxHandle';

// const root = ReactDOM.createRoot(document.getElementById("root"));

let styObj = {
    color: 'red',
    fontSize: '16px'
};
let x = 10;
let y = 20;

//把react.createElement方法改成自己的方法
//把react.Fragment改为直接填写
//可以见到react已经没有被调用了
let jsxObj = createElement(
    //   React.Fragment,
    "div",
  null,
  createElement(
      "h2",
    {className: "title",
     style: styObj},
    "zono"
  ),
  createElement(
    "div",
    {className: "box"},
    // "牛",
    createElement("span", null, x),
    createElement("span", null, y)
  )
);

console.log(jsxObj);

//有了render方法，就不需要ReactDOM.render了
// root.render(jsxObj);
render(jsxObj,document.getElementById("root"));

import React from 'react'; //React语法核心
import ReactDOM from 'react-dom/client'; //构建HTML(WebApp)的核心

//获取页面中#root的容器，作为“根”容器
const root = ReactDOM.createRoot(document.getElementById('root'));

//基于render方法渲染我们编写的视图，把渲染后的内容，全部插入到#root中进行渲染
root.render(
        ....
);

//src\index.jsx（index.js改过来的）
// 项目经过瘦身，保留文中内容就行
import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

/* 需求一：基于数据的值，来判断元素的显示隐藏 */
let flag = false,isRun = false;

//渲染根函数，注意区分两种写法的区别。
root.render(
    <>
        {/!* 控制元素的display样式：不论显示还是隐藏，元素本身都渲染出来了 *!/}
        <button style={{
            display: flag ? 'block' : 'none'
        }}>按钮1</button>

        <br />

        {/!* 控制元素渲染或者不渲染 *!/}
        {flag ? <button>按钮2</button> : null}

        <br />

        <button>{isRun ? '正在处理中...' : '立即提交注册'}</button>
    </>
);


/* 需求二：从服务器获取了一组列表数据，循环动态绑定相关的内容 */
let data = [{
    id: 1,
    title: 'zono1'
}, {
    id: 2,
    title: 'zono2'
}, {
    id: 3,
    title: 'zono3'
}];//虚拟数据，假装从后端拿来

root.render(
    <>
        <h2 className="title">今日新闻</h2>
        <ul className="news-box">
            {data.map((item, index) => {
                /* 循环创建的元素一定设置key属性，属性值是本次循环中的“唯一值”「优化DOM-DIFF」 */
                return <li key={item.id}>
                    <em>{index + 1}</em>
                    &nbsp;&nbsp;
                    <span>{item.title}</span>
                </li>;
            })}
        </ul>

        <br />

        {/* 扩展需求:没有数组，就是想单独循环五次 */}
        {new Array(5).fill(null).map((_, index) => {
            return <button key={index}>
                按钮{index + 1}
            </button>;
        })}
    </>
);

//下面是官方笔记，不确定能不能跑通
const createElement = function createElement(type, props, ...children) {
    // virtual:[ˈvɜːtʃuəl] 
    let len = children.length;
    let virtualDOM = {
        type,
        props: {}
    };
    if (props !== null) virtualDOM.props = { ...props };
    if (len === 1) virtualDOM.props.children = children[0];
    if (len > 1) virtualDOM.props.children = children;
    return virtualDOM;
};

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

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

//src\index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.less';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div>zono 无敌</div>
);