Live Note

Remain optimistic

Posted on Edited on In

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，用于解决函数引用问题。

Read more »

Posted on Edited on In

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。

Read more »

Posted on Edited on

项目文件目录

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：设置输出目录。

Posted on Edited on In

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
}

Posted on Edited on

序言

农业和游牧或工业不同，它是直接取资与土地的。
游牧的人飘忽不定，工业可以择地而居。
而种地的人却搬不动地。

从农业本身来看，是无需群居的。最小的社区可以只有一户人家。
夫妻和孩子聚集，满足两性与抚养的需要。
无论在什么性质的社会里，家庭总是最基本的抚养社群。

中国农民聚集而居原因：

  1. 耕地面积小，小农经营。住所与耕地不会相隔太远
  2. 需要水利，所以大家一起合作。
  3. 合作弊害。
  4. 土地继承。

农村属于 face to face group，所以 文字 在农村并没有太大意义。

社会学中通常两种不同性质的社会：

  1. 共同体：没有主要的目的聚集。
  2. 社会：有主要的目的聚集。

孝是什么，孔子并没有抽象地加以说明。最后归结到“心安”二字。
做子女的在日常接触中熟悉父母的性格，然后承他们的欢，做到心安。

Read more »