React原理

@ 姜波 | 星期二，七月 14 日，2020 年 | 3 分钟阅读 | 更新于 星期二，七月 14 日，2020 年

// JSX 基本用法
const imgElem = <div id="div1">
    <p>some text</p>
    <img src={imgUrl}/>
</div>

// JSX style
const styleData = { fontSize: '30px',  color: 'blue' }
const styleElem = <p style={styleData}>设置 style</p>

// JSX 加载组件
const app = <div>
    <Input submitTitle={onSubmitTitle}/>
    <List list={list}/>
</div>

// JSX 事件
const eventList = <p onClick={this.clickHandler}>
    some text
</p>

// JSX list
const listElem = <ul>{this.state.list.map((item, index) => {
    return <li key={item.id}>index {index}; title {item.title}</li>
})}</ul>


// 总结
React.createElement('div', null, [child1, child2, child3])
React.createElement('div', {...}, child1, child2, child3)
React.createElement(List, null, child1, child2, '文本节点')
// h 函数
// 返回 vnode
// patch

class ListDemo extends React.Component {
  constructor(props) {}
  render() {}
  increase = () => {
    // 开始：处于batchUpdate
    // isBatchingUpdates = true
    this.setState({
      count: this.state.count + 1
    })
    // 结束
    // isBatchingUpdates = false
  }
}

class ListDemo extends React.Component {
  constructor(props) {}
  render() {}
  increase = () => {
    // 开始：处于batchUpdate
    // isBatchingUpdates = true
    setTimeout(() => {
      // 此时isBatchingUpdates 是false
      this.setState({
        count: this.state.count + 1
      })
    })
    // 结束
    // isBatchingUpdates = false
  }
}

transaction.initialize = function () {
  console.log("initialize")
}
transaction.close = function () {
  console.log("close")
}
function method() {
  console.log("abc")
}
transaction.perform(method)

// 输出“initialize”
// 输出“abc”
// 输出“close”