React 新手笔记

之前用的是 vue，7月开始接触 react，匆匆忙忙开始写代码，不少东西都不太了解，一边写一边看文档/文章。随手记录一些东西。

团队的技术栈是 React saga + tcff（内部开源的框架，类似 dva）+ tea（内部开源的 UI 框架）

组件定义的两种方式

jsx 编译过程 | 组件生命周期 | 特殊的钩子函数

没有什么逻辑的文字笔记

• 出于性能考虑，React 会将多个 setState 合并，一次性更新
• 要根据上一个状态计算下一个状态时，用 setState(prevState, prevProps)
• 类组件里只有 constructor 和生命周期函数默认将 this 绑在了当前组件上，自定义的方法不然就是在 constructor 里用 bind 绑定 this，不然就是用 arrow function

// 方法一，用 bind
constructor(props) {
    ...
    this.handleClick = this.handleClick.bind(this);
}

// 方法二，用 arrow function
handleClick = () => {
    ...
}

• 如果组件返回 null，那页面上不会显示出组件，但是组件的生命周期还是会被调用到

return null; // 函数组件直接返回

render() { // 类组件调用 render 渲染
    return null;
}

• <select>、<input>、<textarea> 需要绑定 onChange 更新当前 value
• 大表单更新 state 的时候，应该写一个通用的方法，根据表单项（name="password"、name="date"）更新对应字段
• 状态提升：父组件管理 state，通过 props 更新子组件

参考资料

1. React精髓！一篇全概括(急速)