react笔记 - 技术栈

一、项目打包部署：

命令：npm run build

要部署服务器需要通过java或者node搭建一个服务器，前端实现较困难，但是也可以借助一个第三方库express来体验服务器部署。

打包完成后进入build文件夹：

serve 文件名指定启动的文件名。如果默认启动当前文件夹下根目录：serve

前端通常公司中是给后端一个build的包，让后端部署到服务器

二、react扩展

创建一个新项目：creare-react-app react-extension

初始化项目目录文件：

index.js

javascript 复制代码

import React from "react";
import ReactDOM from "react-dom";
import App from './App'

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

app.js

javascript 复制代码

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        <h2>我是app</h2>
      </div>
    )
  }
}

index.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

扩展1：setState的使用

（1）、setState是异步更新，setState方法是同步执行的，但是更新state状态的动作是异步的，为了提高渲染效率，减少频繁的页面更新，react的更新应该也是有一个缓存异步更新的机制。所以即使调用了更新的方法之后去拿更新的值也是拿不到的。

javascript 复制代码

import React, { Component } from 'react'

export default class index extends Component {
    state={count:0}
    add=()=>{
        // 获取原来的count值
        const {count}=this.state
        // 更新状态
        this.setState({count:count+1})
        // 这里拿到的count并不是修改后的count，而是更新之前的count值，这是因为setState方法
        // 虽然是同步的，但是react操作更新的动作是异步的
        console.log('输出',this.state.count)
    }
  render() {
    return (
      <div>
        <h1>当前求和为：{this.state.count}</h1>
        <button onClick={this.add}>点我+1</button>
      </div>
    )
  }
}

为了解决1中的问题，实际开发中setState方法是可以支持传入第二个参数的，第二个参数默认是一个函数，因此我们可以从函数中拿到更新之后的状态。

javascript 复制代码

  // 更新状态
        this.setState({count:count+1},()=>{
            console.log(this.state.count)
        })

（2）、setState支持两种更新状态的方法：对象式更新和函数式更新

对象式更新：

以上的代码中的更新就是对象式更新，第一个参数采用传入一个对象的方式

函数式更新

（第一个参数是通过一个箭头函数返回一个对象的方式更新状态，第二个参数箭头函数的方式拿到更新后的state.)

javascript 复制代码

        this.setState(
            state=>({count:state.count+1}),
            ()=>{
                console.log(this.state.count)
            })

从上面的两种更新方式获取可以看到，第一种更新的方式是函数式更新的语法糖，写起来代码更简洁，如果项目中不需要通过state,props的值更新状态，则可以直接使用第一种对象式更新，如果需要用到state，或props中的值，则也可以通过函数式更新的方式更新。当然，其实通过对象式更新也可以实现函数式更新要实现的功能。