Live Note

开店第一天

• 确定了店名，就叫 Edward Store，暂时当个杂货铺吧，后期需要转型的话也方便。
• 注册域名。
• 开 Shopify 店铺。

已完成事件

• 注册域名
• 注册 shopify 店铺

useMemo

useMemo 是拿来保持一个对象引用不变的。useMemo 和 useCallback 都是 React 提供来做性能优化的。比起 classes， Hooks 给了开发者更高的灵活度和自由，但是对开发者要求也更高了，因为 Hooks 使用不恰当很容易导致性能问题。

假设有个 component，在 dataConfig 变化的时候重新去 fetchData：

1
2
3
4
5
6

<Child
  fetchData={() => {
    // fetch data
  }}
  dataConfig={{ id: getId(queryId) }}
/>

如果是个 Class Component，会这么写：

1
2
3
4
5
6
7

class Child extends React.Component<Props> {
  componentWillReceiveProps(nextProps: Props) {
    if (nextProps.dataConfig !== this.props.dataConfig) {
      nextProps.fetchData(nextProps.dataConfig)
    }
  }
}

使用 Hooks 后长这样：

1
2
3
4
5

const Child = ({ fetchData, dataConfig }: Props) => {
  useEffect(() => {
    fetchData(dataConfig)
  }, [fetchData, dataConfig])
}

使用 Class Component 时我们需要手动管理依赖，但是使用 Hooks 时会带来副作用：React 使用的是Object.is()，如果fetchData的 reference 变了，也会触发 useEffect。
虽然逻辑上 React 的处理是合理的，但是还是需要手动去解决它导致的性能问题：官方提供了 useCallback 这个 hooks，用于解决函数引用问题。

useRef

• mutable ref
• presist

eg: 实现一个需求：点击按钮时 input 自动聚焦。

• createRef 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const HomePage = () => {
  const input = createRef<HTMLInputElement>()

  const handle = () => {
    if (input.current) {
      input.current.focus()
    }
  }

  return (
    <div>
      <input ref={input} />
      <button onClick={handle}>focus</button>
    </div>
  )
}

• useRef 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const HomePage = () => {
  const input = useRef<HTMLInputElement | null>(null)

  const handle = () => {
    if (input.current) {
      input.current.focus()
    }
  }

  return (
    <div>
      <input ref={input} />
      <button onClick={handle}>focus</button>
    </div>
  )
}

两者的区别在于：createRef 每次渲染会返回一个新的引用，而 useRef 返回的是相同的引用（persist）。对于函数式组件，每次 useState 会造成整个组件的重新渲染，但是 uesRef 可以保证引用不变，不会触发 re-render。

项目文件目录

1
2
3
4
5
6
7
8
9
10
11
12

-Demo
|--build
|--dist
|--css
|--js
|--view
|--node_modules
|--src
|--
|--package.json
|--webpack.config.js
|--webpack.production.config.js

• src：代码开发目录
• build：开发环境 webpack 输出目录
• dist：生产环境 webpack 输出目录
• package.json：项目配置
• webpack.config.js：开发环境配置
• webpack.production.config.js：生产环境配置

webpack 配置文件

需命名为 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

const path = require("path") // 模块

module.exports = {
  mode: "development",
  entry: path.join(__dirname, "./src/main.js"), // 入口文件
  output: {
    path: path.join(__dirname, "./dist"), // 输出文件
    filename: "bundle.js",
  },
  plugins: [
    // 插件
  ],
  module: {
    rules: [
      // 路由规则
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|gif|bmp|jpeg)$/,
        use: "url-loader?limit=1111&name=[hash:8]-[name].[ext]",
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2)$/,
        use: "url-loader",
      },
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
}

webpack-dev-server

• 通过 npm 安装：npm i webpack-dev-server
• 运行命令：webpack-dev-server –devtool eval –port 9876 –progress –colors – compress –hot –inline –content-base ./build
  可以在 package.json 中的 script 加一个启动项。
• –devtool eval：在报错时精确到文件的行号
• –progress：显示编译的输出内容进度
• –compress：启用 gzip 压缩
• –hot：热更新，无需刷新浏览器
• –colors：显示编译的输出内容颜色
• –inline：自动刷新模式。默认为 iframe。
• –content-base：设置输出目录。

Function

function has special rules:

1. It must work for every possible input value
2. And it has only one relationship for each input value

Although each input will only have one output, but for different inputs may have the same output.

Pure function

Given all these, pure functions have a big set of advantages. They are easier to read and understand, as they do one thing. There is no need to look outside the function code and check for variables. There is no need to think how changing the value of the variable will affect other functions. No mutations in other functions will affect the result of the pure function for a specific input.
Pure functions are easier to test, as all dependencies are in the function definition and they do one thing.
For Example:

1
2
3
4
5
6
7
8
9
10

var arr = [1, 2, 3]

// Pure
arr.slice(0, 2) // [1, 2]
arr.slice(0, 2) // [1, 2]
arr.slice(2, 3) // [3]

// Impure
arr.splice(0, 2) // [1, 2]
arr.splice(0, 2) // [3]

Another Example:

1
2
3
4
5
6
7
8
9
10
11

// Impure
var sign = 3

// The return value depends on the system status
var isBigger = (num) => num > 3

// Pure
var isBigger = (num) => {
  var sign = 3
  return num > sign
}