react组件2020-01-06

image.png

render放let后面
span可能有1000行，整个页面都写在一个结构里，很丑
划分区块解决，最简单方法就是函数,把整个页面放在函数里，然后把函数当标签来用，实际上不是标签，写的不算是html
<App></App>,是XML语法，可以进一步简化成<App />虚拟dom

function App(){
return <div>//return后面不打回车
          </div>}

function render(){
   ReactDOM.render(
    React.createElement(App),// jsx可以直接写成<App></App>,
    document.querySelector('#root')
  )

}

组件的构想。一堆标签用函数抱起来，再return出去，函数名就代表这一堆标签。
这样可以作复杂页面

image.png

把属性理解成对象的key和value，

image.png
正好和js的对象完美对应起来，这就是给函数传参
image.png
react的创举：1.虚拟dom 2.标签就是函数，函数就是对象，标签的属性就是函数的参数

不允许修改别人传给你的参数

image.png

最简单的一个表示app2标签的组件

---

如何接受参数

image.png

一般把接受的参数叫做props

---

image.png
this.props.name拿到了参数
props是由父类extends React.Component构造的 image.png

constructor(props){
super(props)
this.state={}
}
this.props.name 

上面api都要背
react强制把this指向undefined

image.png

this.add的this是undefined
第一种解法，this.add.bind(this) 语义更明确
第二种 onClick={()=>this.add}

---

image.png
this.setState固定写法，props外部，state内部 image.png

setState优点缺点
可以对更新进行优化，自己render容易频繁调用，卡页面
setstate可以讲大批量的操作合并成一个然后render，减少更新的损耗

---

注意

image.png

setstate很有可能异步更新，这样写会只+1虽然写了两次+1
可以用函数回调解决多次设置的问题

image.png