react组件的三大核心属性

组件三大核心属性1: state

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined(如何解决:强制绑定this: 通过函数对象的bind(),使用箭头函数)
状态数据，不能直接修改或更新，在类式组件中使用this.setState()变更数据

组件三大核心属性2: props

每个组件对象都会有props属性
组件标签的所有属性都保存在props中
作用：通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据
对props中的属性值进行类型限制和必要性限制使用prop-types库进限制（需要引入prop-types库）

组件三大核心属性3: refs与事件处理

理解

组件内的标签可以定义ref属性来标识自己

事件处理

1.通过onXxx属性指定事件处理函数(注意大小写)

React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

2.在组件中可以通过event.target得到发生事件的DOM元素对象

react生命周期

react相关概念

React的特点

1.声明式编码

2.组件化编码

3.React Native 编写原生应用

4.高效（优秀的Diffing算法）

React高效的原因

1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。

2.DOM Diffing算法, 最小化页面重绘。

JSX(全称: JavaScript XML)

1.react定义的一种类似于XML的JS扩展语法:

JS + XML本质是React.createElement方法的语法糖

2.作用: 用来简化创建虚拟DOM

3.注意：它不是字符串, 也不是HTML/XML标签;它最终产生的就是一个JS对象

4.基本语法规则

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

babel.js的作用

1.浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

2.只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

渲染虚拟DOM(元素)

1.语法: ReactDOM.render(virtualDOM, containerDOM)

2.作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

3.参数说明

参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

模块

1.理解：向外提供特定功能的js程序, 一般就是一个js文件

2.为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。

3.作用：复用js, 简化js的编写, 提高js运行效率

模块化：当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件

1.理解：用来实现局部功能效果的代码和资源的集合

2.为什么要用组件：一个界面的功能更复杂

3.作用：复用编码, 简化项目编码, 提高运行效率

组件化：当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

受控组件与非受控组件

纯函数

理解

一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)
必须遵守以下一些约束
1. 不得改写参数数据
2. 不会产生任何副作用，例如网络请求，输入和输出设备
3. 不能调用Date.now()或者Math.random()等不纯的方法

redux的reducer函数必须是一个纯函数

高阶函数

理解

一类特别的函数,如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

情况1: 参数是函数
情况2: 返回是函数

常见的高阶函数

定时器设置函数
数组的forEach()/map()/filter()/reduce()/find()/bind()
promise
react-redux中的connect函数

作用

能实现更加动态, 更加可扩展的功能

函数的柯里化

通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

//例：
function sum(a){
        return(b)=>{
                return (c)=>{
                        return a+b+c
                }
        }
}

react-小记