React入门以及JSX语法理解

本周主要利用React以及JSX语法外加antd UI组件实现一个增加删除数据的页面，一开始上手这个东西挺难的，因为之前没有接触过React框架这些东西，一开始觉得有点无从下手。不过经过一周的努力和适应，差不多完成了整个需求，下来做一个总结。

React框架

React有一点与Vue是相似的，都是通过数据来渲染页面的，也就是说改变数据就可以改变页面的呈现。但不同的是，Vue直接改变数据，而 React则是通过改变状态来触发重新渲染的。
比如下面一个例子：

<div id="example"></div><script type="text/babel">    ReactDOM.render(        <h1>Hello, Hellen</h1>,        document.getElementById('example')    )</script>

注意，在这之前，要引入react的CDN库，可以自行在网上找。

另一种方法，就是利用react-create-app快速构建React开发环境，可以参考React 教程
来看一个简单的例子：

//在最前面先把需要的模块import进来后面才能用。import React, { Component } from 'react';import './App.css';class App extends Component {//上面属于ES6的语法，即继承于React 组件Component的一个类App,可以认为它也是一个组件。最后export暴露出接口之后，外面可以通过<App />这种结构来使用。  //每个类默认有一个constructor构造器  //这里还需要注意，React是通过改变状态来驱动数据变化，从而触发render函数重新渲染的。因此，一开始可以定义一个状态  constructor(props) {    super(props);    this.state = {      count: 1    }  }  //当点击事件触发后，通过this.setState({})具体改变状态的某个值，从而使得整个状态改变，触发render函数重新渲染。  clickFunc = () => {    let count = this.state.count;    count = count + 1;    this.setState({      count : count    });    //但是，打印出当前状态时，却发现状态中的count总会滞后一个数。    //原因其实是因为this.setState()函数是异步的，他不会立即执行,所以此时获取的count还是原来状态中的count。    console.log(this.state.count);  }  render() {    const data = this.state.count;    return (    //JSX 语法，通俗点讲，就是在JS代码中嵌入了HTML代码，并且是有效的。需要注意的是，变量都需要用{}来扩起来；    //另一方面，要添加样式时，类名需要写成classname。      <div className="box" onClick={this.clickFunc}>      {data}    </div>    )  }}export default App;

JSX语法

JSX语法其实就相当于是HTML和JS的混合，JS里面可以融入HTML代码，在HTML代码里也可以融入JS代码，但是要用{ }括起来。
为什么JSX语法可以起作用呢？你需要先装Babel工具，他会把JSX代码转换成JS语法。
上面的例子中

return (//JSX 语法，通俗点讲，就是在HTML代码中嵌入了JS代码，并且是有效的。需要注意的是，变量都需要用{}来扩起来；//另一方面，要添加样式时，类名需要写成className。    <div className="box" onClick={this.clickFunc}>        {data}    </div>)

上面部分就是JSX语法，注意，JSX语法必须写在script标签里面，并且type要设置为text/babel。

JSX 语法主要的好处就是用起来非常简洁方便，而且性能也要好一些，因为JSX实际上是要转成原生JS的，一般是有工具的，比如Babel等等，转的过程中会对JS进行一些优化。