理论相关:
- 实际上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>
网友评论