1、jsx（javascript xml）

jsx是react定义的一种类似xml的javascript扩展语法。如下是main.jsx和App.jsx的代码（接第一讲，用的vite2开发构建，src目录下目前只有main.jsx和App.jsx）：
main.jsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

App.jsx

import React, { Component } from "react";
export default class App extends Component {
  render() {
    return <div>app</div>;
  }
}

刚开始写的时候是很奇怪，熟练了就好，记住两点就行：
1、遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2、遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包裹

这里推荐使用一个vscode插件ES7 React/Redux/GraphQL/React-Native snippets，当我们新建一个.jsx组件的时候，我们直接在组件里输入rcc，然后按下tab，就可以直接生成类组件了，输入rfc，则生成函数组件，很方便！

2、state

state是组件中最重要的属性之一，存储着组件的状态，相当于vue中的data属性。声明state有两种方式：
1、在类的构造函数中

import React, { Component } from "react";
export default class App extends Component {
  constructor(props) {
    super(props);  //构造函数中使用this的话，必须执行super
    this.state = {
      name: "react",
    };
  }
  render() {
    return <div>{this.state.name}</div>;
  }
}

2、直接在类中声明，这样免去了写constructor的麻烦：

import React, { Component } from "react";

export default class App extends Component {

  state = {
    name: "vue",
  };
  render() {
    return <div>{this.state.name}</div>;
  }
}

如果你启动了vite的话，可以在页面中看到name的值了

3、改变state的值

需要注意的是，react中不允许你直接修改state的值，你也改不了。

import React, { Component } from "react";

export default class App extends Component {
  state = {
    name: "vue",
  };
  changeName = () => {
    this.state.name = "react"; //无法修改state
  };
  render() {
    return (
      <div>
        {this.state.name}
        <button onClick={this.changeName}>change</button>
      </div>
    );
  }
}

当你点击change按钮的时候，页面中的vue依旧是vue，不会变成react。
react中修改state的方法是setState方法

修改changeName中的代码

  changeName = () => {
    this.setState({
      name: "react",
    });
  };

保存，再点击change按钮，vue就会变为react了

setState方法在这里我们姑且认为他是异步的（其实他有时候是异步，有时候同步，这块原理我还没去钻研，以后学到了会分享，感兴趣的可以直接去看大佬的解析），所以就算在执行完setState方法后，打印this.state.name，控制台也会输出vue

  changeName = () => {
    this.setState({
      name: "react",
    });
    console.log(this.state.name);  //vue
  };

如果想获取更新后的name值，我们可以在setState方法的第二个参数传入一个回调函数，

  changeName = () => {
    this.setState(
      {
        name: "react",
      },
      () => {
        console.log(this.state.name); //react
      }
    );
  };

这样我们就可以拿到更新后的name值了，是不是想起了vue的nextTick？

ok，下一次轮到了props了。有什么不对的地方还请大佬指出！

React学习之路（2）--state

1、jsx（javascript xml）

2、state

3、改变state的值