React - Andrei‘s

单页面应用，让浏览网站就像是在使用桌面应用一样；不再像之前那样点一个链接，就发一次请求，然后显示新的内容。单页面应用通过JavaScript操控页面来展示不同的内容。

React的概念

1.不直接操作DOM。React会来做这件事！

2.让构建网站变得像是搭积木。

因为一个网站是由一个个小的组件组成的，组件又可以复用，还可以分享到网上去。

3.单向数据流。（通过state里面的数据去更新组件，易于查找bug；这些数据不会流向其他组件，也不会从下往上流动；一直是从上往下流动！）

虚拟dom是一个JavaScript对象，他只会更新产生了变化的那个dom。

4.react只是一个UI库。（它只关心用户界面）

011

013

React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)

准备工作

1.安装代码编辑器VScodeVisual Studio Code - Code Editing. Redefined

2.安装NodeJSNode.js (nodejs.org)

3.安装Vite（视频中使用的是CRA）开始 | Vite 官方中文文档 (vitejs.dev)

4.安装GitGit (git-scm.com)

028

react在什么时候会重新渲染组件？当对象完全不同的时候（状态存在对象里面）

setState这个方法就是把state变为一个不同的对象（区别于之前的state），然后react检测到了这个对象和之前那个对象在内存中处于不同的地址，就会重新渲染组件！

注意！onClick={}里面是一个回调函数！

029

确保状态更新前后，key对应的值的类型要保持相同；视频中 ,state里面name:{firstName：‘’，lastName：‘’}，而setState({name:''})；状态更新前是对象，状态更新后是字符串，这就会导致组件不重新渲染！

030

改写onClick中的代码：

            onClick={() => {
              this.setState({ name: "Andrei" });
              console.log(this.state);
            }}


改为

            onClick={() => {
              this.setState(
                () => {
                  return { name: "Andrei" };
                },
                () => {
                  console.log(this.state);
                }
              );
            }}

setState里面写了2个回调函数！改写之后就会显示最新的状态！

033 为什么需要加key

提高组件重新渲染的效率。

map里面的那个h1标签，相当于是一个模板，所有的数据都用了同一个模板，那么就只能通过唯一的key值来区分他们，有了key之后，如果某个值发生了变化，那就只需要去更新产生了变化的那个dom。

034SPA

ZTM.io ,如果要渲染这个页面，那就需要向服务器发请求，服务器会送回html、css、js文件来渲染页面；ZTM.io/react ，如果要渲染这个页面，需要重复刚才的步骤。

但SPA单页面应用在跳转ZTM.io/react的时候就不需要重新向服务器发送请求了！

因为第一次请求就可以拿到所有的react代码和网站代码。

035

初始数据是一个空的数组 

    this.state = {
      monsters: [],
    };

然后开始思考：

1.什么时候获取数据 when do i get the list?

2.怎么获取数据 how do i get the list?

3.数据放到哪里 where do i put the list? 放到 state 里面

react的生命周期方法，挂载就是组件第一次渲染到页面，组件第一次渲染到页面的时候就需要发起api请求，因为组件第一次挂载了就需要数据往里面填！

  componentDidMount(){
    
  }


  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json()) //转为json格式
      .then((users) =>
        this.setState(
          () =