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" />; } 

9. react将小写的标签名认为是HTML的原生标签
10. 大写的标签名认为是react组件
11. 不能用表达式表示标签
12. 标签名能够为大写开头的变量
13. 若是没有给属性传值，默认为true不建议使用
14. 可使用扩展运算符...去传递属性
15. 组件能够用数组形式返回多个元素
16. false,null,undefined,true都是有效的子代，但不会被渲染
17. 数字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函数。

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

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

4. 不管reducer返回的state是否改变，subscribe中注册的全部回调函数都会被触发
5. 组件卸载以前，手动加载的监听事件和定时器要手动清除，由于这些不是react的控制范围内，必须手动清除。
6. class变为className，for变成htmlFor，由于class和for变成了关键字
7. 不得使用setState的事件

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

8. 存取DOM的适当时机

• componentDidMount()