react_04jsx的本质(一)

理论相关:

• 实际上jsx只是React.createElement(component,pros,children)函数的语法糖。最终jsx都会被转换成React.createElement函数调用。
  转换网站:在线转换

• 观察createElement函数在源码中的位置:ReactElement.js

  
  
  React.js
  
  
  image.png

• createElement传递三个参数
  1.type(当前的类型，可以是标签元素也可以是组件元素)
  2.config(jsx中的属性都在这以key:value的形式存储)
  3.children(存放在标签中的内容,以children数组的方式存储，如果是多个元素也没事,源码对其有特殊处理)

  
  
  createElement函数参数
  
  
  源码处理
• 通过createElement创建出来的ReactElement对象有啥作用?
  1.React利用它组成了JavaScript对象树
  2.JavaScript对象树即虚拟DOM
  可以在render()函数中观察对象，然后打印出来:

render(){
  var elementObj=React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
  className: "header"
}, "header"), /*#__PURE__*/React.createElement("div", {
  className: "content"
}, "content"), /*#__PURE__*/React.createElement("div", {
  className: "footer"
}, "footer"));
 console.log(elementObj);
 return elementObj;
}

流程:

jsx -->createElement函数-->ReactElement(对象树)-->ReactDOM.render-->真实DOM
RN： jsx -->createElement函数-->ReactElement(对象树)-->ReactDOM.render-->原生控件(UIButton/Button)

案例相关:

实现效果:

案例最终效果

注意事项:

• React中设计原则:state中的数据不可变性
• splice会直接影响数组,filter不会影响原来数组

案例思路:
1.state中造数据
2.按照图示普通页面table布局和样式修改
3.普通写死数据替换为循环数据
4.价格展示的地方考虑封装成工具放在utils文件中,考虑传进来的若非number类型，不能保留两位小数问题
5.整个页面以render()为界限，上面都是渲染相关的组件,下面都是操作的逻辑
6.reduce高阶函数与ES6扩展运算符的掌握
7.button按钮负数后禁用问题