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按钮负数后禁用问题

<script type="text/babel">
        class App extends React.Component{
            constructor(){
              super();
              this.state={
                books:[{name:"《算法导论》",date:"2006-9",price:85,count:1},{name:"《编程艺术》",date:"2003-9",price:59,count:2},{name:"《react入门》",date:"2001-9",price:39,count:3},{name:"《数据结构》",date:"2006-3",price:99,count:1}]
              }
            }
            renderTable(){
              let totalPrice=0
              //方式一:
              // for(let item of this.state.books){
              //   totalPrice+=item.price*item.count
              // }
              //方式二:reduce高级函数,this.state.books.reduce(fun,initialValue) ,其回调函数的参数 ，参数一：上一次回调函数的结果(第一次没有上一次函数的回调函数结果就使用初始化值)
              totalPrice=this.state.books.reduce((preValue,item,index)=>{
               return preValue+item.price*item.count
              },0)
              return(
                <React.Fragment>
                    <table>
                        <thead>
                          <tr>
                            <th></th>
                          <th>书籍名称</th>
                          <th>出版日期</th>
                          <th>价格</th>
                          <th>购买数量</th>
                          <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                          {
                            this.state.books.map((item,index)=>{
                              return( 
                              <tr key={index}>
                                <td>{index+1}</td>
                                <td >{item.name}</td>
                                <td >{item.date}</td>
                                <td >{this.formatePrice(item.price)}</td>
                                <td> 
                                  <button  disabled={item.count<=1}  onClick={e=>this.changeCount(index,"decrate")} >-1</button>
                                  <span style={{padding:5}}>{item.count}</span>
                                  <button onClick={e=>this.changeCount(index,"add")}>+1</button>
                                </td>
                                <td><button onClick={e=>this.deleteBook(index)}>移除</button></td> 
                              </tr>  
                             )
                            })
                          }
                        </tbody>
                    </table>
                     <h2>总价格:{this.formatePrice(totalPrice)}</h2>       
                </React.Fragment>
              ) 
            }
            renderTempTip(){
              return <h2>当前购物车并无任何书籍~</h2>
            }
            render(){
               return  this.state.books.length>0?this.renderTable():this.renderTempTip() 
            }
            deleteBook(index){
                console.log(index)
                //React中设计原则:不能直接修改原来数据，除非通过setState来操作,比如用splice直接修改就不行this.state.books.splice已经直接修改数组,而filter不会影响原来的数组(books)
                this.setState({
                  books:this.state.books.filter((item,indey)=>{return index!=indey})
                })
            }
            //价格处理
            formatePrice(price){
              if(typeof(price)!=="number"){
                price=Number(price)||0
              }
              return "¥"+price.toFixed(2)
            }
            // 加减
            changeCount(index,type){
              //错误的操作!!!因为直接修改了数据
            //  this.state.books[index].count+=1;
            //   this.setState({
            //     books:this.state.books
            //   }) 

            // 正确操作
               let newbooks=[...this.state.books]
              if(type=="add"){
                newbooks[index].count+=1
                 this.setState({
                    books:newbooks
                 })
              }
              else{
                newbooks[index].count-=1
                this.setState({
                    books:newbooks
                 })
              }
            }
        }
        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>