2019-05-01 初识 React

原生JS或JQ思想:
内容放入页面,用JS取值,做处理,回传页面
重复以上

React思想:
声明,更改变量
渲染,局部更新

js->react

---

JSX
用html的形式写JS

---

Ract初衷:
DOM难用,构造出虚拟DOM
虚拟DOM是什么?
表示DOM节点的概念

---

---

React创举1:虚拟DOM
创举2:标签就是函数,函数就是对象.
标签的属性就是函数的参数

---

React组件

1. 简单组件用函数
   第一个参数就是 props
2. 复杂组件用

class xxx extends React.Component{
constructor(props) super(props){
this.state={
this.setState(){
render(){

3. 父子通信(回调函数)[组件通信]

父传子:父组件传一个函数给子组件,子组件在恰当的时候调用

子传父:1.父组件将一个函数 fn 作为子组件的 props 传给子组件
2.子组件在恰当的时候调用这个 fn，并且把数据放在 fn 的参数里

如龟兔赛跑的例子

4. 问爷孙组件如何通信?
   爷爷传给爸爸,爸爸再传给孙子

(React 强制把this变成undefined)

function App(props){
  return (
  <div>
    app {props.name}
  </div>
  )
}

class App2 extends React.Component{
constructor(props){
super(props)
this.state = {
 number:0
}
}
add(){
  this.setState({
    number:this.state.number + 1
  })
}
  render(){ //局部render
    return (
        app 2 {this.props.name}
        <div>
        {this.state.number}
        <button onClick={this.add.bind(this)}>+</button>
        </div>
      </div>
  )
  }
}

render()

function render() {
    ReactDOM.render(
      <App2 name="fff" age="18"/>, //React.createElement(App)
      document.querySelector('#root'))
}

理解React组件的例子

---

setState优点
可以对更新进行优化,将render()的大批量更新优化成一次更新
话句话说:
如果自己加render(),就很容易坑,不如交给setState...减少更新损耗

---