问题总结21-01-25至21-01-31

⭐JS动态生成table

<table class="table table-hover" id="tablebox">
    <tr>
        <td class="active">用户名</td>
        <td class="warning">编辑</td>
    </tr>
</table>

<script language="javascript">
    var data = [{"id": 1, "name": "张三"},{"id": 14, "name": "张三"},{"id": 1, "name": "张三"},{"id": 1, "name": "张三"}];
    window.onload = function () {
        var tdArr = document.getElementById('tablebox').firstElementChild;
        for (var i = 0; i < data.length; i++) {
            var tr = document.createElement("tr");
            tr.innerHTML = '<td class="active">' + data[i].name + '</td><td class="warning" onClick=clickPerson('+data[i].id+') >编辑</td>';
            tdArr.appendChild(tr)
        }
    };
    function clickPerson(id) {
        console.log(id)
    }
</script>

⭐React概览，介绍React不错的网站。

https://www.taniarascia.com/getting-started-with-react/ 

⭐React State&生命周期例子

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

1. 当 <Clock /> 被传给 ReactDOM.render()的时候，React 会调用 Clock 组件的构造函数。因为 Clock 需要显示当前的时间，所以它会用一个包含当前时间的对象来初始化 this.state。我们会在之后更新 state。
2. 之后 React 会调用组件的 render() 方法。这就是 React 确定该在页面上展示什么的方式。然后 React 更新 DOM 来匹配 Clock 渲染的输出。
3. 当 Clock 的输出被插入到 DOM 中后，React 就会调用 ComponentDidMount() 生命周期方法。在这个方法中，Clock 组件向浏览器请求设置一个计时器来每秒调用一次组件的 tick() 方法。
4. 浏览器每秒都会调用一次 tick() 方法。 在这方法之中，Clock 组件会通过调用 setState() 来计划进行一次 UI 更新。得益于 setState() 的调用，React 能够知道 state 已经改变了，然后会重新调用 render() 方法来确定页面上该显示什么。这一次，render() 方法中的 this.state.date 就不一样了，如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。
5. 一旦 Clock 组件从 DOM 中被移除，React 就会调用 componentWillUnmount() 生命周期方法，这样计时器就停止了。

⭐React中事件写法

1. onClick={this.handleClick} 与 this.handleClick = this.handleClick.bind(this, id) （e隐式传递）

2. handleClick = () => {}

3. onClick={(e) => this.handleClick(id, e)}（e显示传递）

 

⭐React哲学，就是开始做项目之前的工作，挺重要的。

第一步：将设计好的UI划分为组件层级。

第二步：用React创建一个静态版本。

第三步：确定UI state的最小且完整表示。

第四步：确定state放置的位置。

第五步：添加反向数据流。

⭐Echarts柱状图解析

https://blog.csdn.net/qq_36330228/article/details/79945928

⭐React中false, null, undefined, true不会被渲染

<div>
    {showHeader && <Header />}
</div>

仅当showHeader为true时，才会渲染<Header />