React菜鸟食谱

JSX

1. 用小括号包裹代码防止分号自动插入的bug，用大括号包裹里面的表达式

2. 切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式

3. 使用小驼峰定义属性，例如，class变成className，tabIndex对应tabindex

4. 渲染之前会转换为字符串，防止XSS(跨站脚本)攻击

5. 本质上是为react.createElement(component, props, ...children)方法提供的语法糖

6. data-*，aria-*是例外的，不遵守小驼峰命名规则

7. 没有子代可以使用自闭和标签，

   <div className="sidebar" />
   

    
8. 可以使用Bable在线编辑器看JSX如何转换为JavaScript的
9. 可以使用点语法来从模块中导出组件

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

1. react将小写的标签名认为是HTML的原生标签
2. 大写的标签名认为是react组件
3. 不能用表达式表示标签
4. 标签名可以为大写开头的变量
5. 如果没有给属性传值，默认为true不建议使用
6. 可以使用扩展运算符...去传递属性
7. 组件可以用数组形式返回多个元素
8. false,null,undefined,true都是有效的子代，但不会被渲染
9. 数字0仍然会被渲染

 

元素

1. immutable不可变的，创建后无法改变其内容与属性
2. 更新页面的唯一方法是创建一个新的元素传入reactDOM.render()
3. 渲染过程只会更新改变的部分

 

组件&Props

1. 组件像是函数，接受的参数为（props），输出页面上的元素
2. 当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”
3. 组件名称必须为大写字母开头，例如<Welcome />
4. 组件必须先定义或引用才可使用
5. 组件的返回值只能有一个根元素
6. 建议从组件自身的角度来命名props，而不是根据使用组件的上下文命名
7. 概念：纯函数在函数内不改变传入参数的值
8. 所有的React组件必须像纯函数那样使用它们的props

 

State & 生命周期

1. 状态是私有的，完全受控于当前组件
2. 使用类就允许我们使用其它特性，例如局部状态、生命周期钩子，抽象组件的区别
3. 类组件应该始终使用props调用基础构造函数

4. constructor(props){
       super(props);
       this.state ={date:newDate()};
   }
   
   

5. 虽然this.props由React本身设置以及this.state具有特殊的含义，但如果需要存储不用于视觉输出的东西，则可以手动向类中添加其他字段
6. 如果你不在render()中使用某些东西，它就不应该在状态中
7. 使用setState()更新组件的局部状态，状态改变触发render()渲染应该更新的元素
8. 不能直接更新状态，构造函数是唯一初始化this.state的方法
9. 状态更新是异步的，不能以此为根据去计算下一个值
10. 如果需要使用前一个state或者props作为依据，可以使用setState()接受一个函数，该函数接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数：

11. this.setState((prevState, props) => ({
      counter: prevState.counter + props.increment
    }));
    

12. setState()是浅合并只合并对应的属性，没对应的不管
13. 组件的内部状态其他组件不可访问，但是可以将状态做为属性传递给其子组件
14. 状态向子组件传递是单向的，自顶向下的，任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或UI只能影响树中下方的组件
15. 组件是有状态的还是无状态的是可能随时间变化的

 

事件处理

1. 绑定事件的命名为驼峰式写法
2. JSX需要用大括号包起处理函数，DOM写成字符串

3. <button onclick="activateLasers()">
     Activate Lasers
   </button>
   
   <button onClick={activateLasers}>
     Activate Lasers
   </button>
   

4. 使用preventDefault阻止默认行为不能用return false
5. 通过bind方式向监听函数传参事件对象e要排在所传参数的后面

 

条件渲染

1. 在JSX中使用逻辑运算符&&或三目运算符，用花括号包裹
2. render()返回null阻止渲染

 

列表&Keys

1. a key should be provided for list items
2. keys可以给DOM中的某些元素被增加或删除的时候帮助识别哪些元素发生变化，所以数组中应给不同的key
3. JSX的大括号可以包含任意的表达式
4. key不会传递给组件
5. map()嵌套太多考虑提取出组件

 

表单

1. 表单只接受一个唯一的name
2. 使用受控组件表现表单这种本身具有状态的元素，react负责渲染表单的组件控制用户后续操作产生的变化

 

状态提升

1. 如果几个组件需要公用状态数据，最好将这部分提升至他们最近的父组件当中去管理
2. 任何可变数据理应只有一个单一的数据源

 

组合 vs 继承

1. 建议使用组合而不是继承

 

React理念

1. 划分你的组件（遵循单一功能原则）
2. 创建一个静态版本
3. 定义UI状态的最小表示，不要重复了
4. 明确组件的状态
5. 处理反向数据流
6. state只在交互时使用，props是一种父级向子级传递数据的方式
7. 自顶向下构建组件适于小型应用，自底向上适用于大型应用
8. 底层组件的更新需要更高层级的组件状态更新
9. 区分props与state
10. 思考你的应用

 

PropTypes进行类型检查

1. array
2. bool
3. func
4. number
5. object
6. string
7. symbol
8. node(任何可被渲染的元素（包括数字、字符串、子元素或数组）
9. element
10. PropTypes.instanceOf(Message)某个类的实例
11. PropTypes.oneOf(['News', 'Photos'])限制为某个特定值之一
12. PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)])限制为列举的类型
13. PropTypes.arrayOf(PropTypes.number)一个指定元素类型的数组
14. PropTypes.objectOf(PropTypes.number)一个指定类型的对象
15. PropTypes.shape({color: PropTypes.string,fontSize: PropTypes.number}) 一个指定属性及其类型的对象
16. PropTypes.func.isRequired这样如果这个属性父组件没有提供时，会打印警告信息
17. PropTypes.any.isRequired任意类型的数据
18. 自定义验证器，在'oneOfType'中不起作用
19. 在arrayOf与objectOf中可以提供自定义的验证器
20. 可以使用defaultProps为props定义默认值
21. 对于大型的代码库建议使用Flow与TypeScript来代替PropTypes

 

静态类型检查

1. Flow
2. TypeScript
3. Reason
4. Kotlin
5. F#/Fable

 

Refs&DOM

1. 几个适用的情况，处理焦点、文本选择或媒体控制、触发强制动画、集成第三方DOM库
2. 不要过度适用refs，组件state更为清晰
3. ref接受一个回调函数，在组件被加载或卸载时会立即执行
4. 回调会在componentDidMount或componentDidUpdate这些生命周期回调之前执行
5. 加载时将DOM元素传入ref的回调函数，卸载时传入null
6. 当ref属性用于适用class声明的自定义组件时，回调接受加载的React实例，仅对class声明的组件有效
7. 不能在函数式组件上使用(function component() {})，因为他们没有实例
8. 但是只要ref指向一个DOM元素或者class组件，他就能在组件内部使用

 

非受控组件

1. 只提供初始值和获取结果，其余表单数据由DOM处理
2. <input /> type为text，<select></select>，<textarea>支持defaultValue，type是radio和checkbox支持defaultChecked

 

性能优化

1. 虚拟DOM，当组件的props或者state改变时，React比较新返回的元素个之前渲染的元素来决定是否有必要更新实际的DOM，不相等时会更新DOM
2. 利用shouldComponentUpdate返回true时React执行更新
3. 返回fasle跳过整个渲染进程，包括组件和之后的内容调用render()
4. React.PureComponent不必写自己的shouldComponentUpdate，它只做一个浅比较。但是浅比较会忽略属性或状态突变的情况，此时不能使用它
5. 使用不可突变的数据结构可以更轻松的追踪对象变化

 

小知识点

1. 组件的命名的首字母要大写，这是类命名的规范
2. setSate()是异步的

setState()会调用render方法，但是不会立即改变state的值，state是在render方法中赋值的。所以在执行setState()后立即获取state的值是不变的。同样的直接赋值state并不会触发更新，因为没有调用render函数。

1. reducer必须返回一个新的对象才能出发组件的更新

因为在connect函数中会对新旧两个state进行浅对比，如果state只是值改变但是引用地址没有改变，connect会认为它们相同而不触发更新。

1. 无论reducer返回的state是否改变，subscribe中注册的所有回调函数都会被触发
2. 组件卸载之前，手动加载的监听事件和定时器要手动清除，因为这些不是react的控制范围内，必须手动清除。
3. class变为className，for变成htmlFor，因为class和for变成了关键字
4. 不得使用setState的事件

• shouldComponentUpdate(nextProps, nextState)
• componentWillUpdate(nextProps, nextState)
• render()

1. 存取DOM的适当时机

• componentDidMount()