React自学心得一（概述、语法及特点、生命周期、属性和状态）

一：React概述

1、React特点：简单、声明试。

React的核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。

2、React开发环境搭建：常用的编辑器及插件的配置

①编辑器：Codekit、Sublime Text3、webstrom、notepad++.......

②插件：Emmet（自动提示插件）HTML-CSS-JS prettify（自动排版插件）Spacegray（模板插件）

③环境：Node.js

④：Emmet(html)语法介绍：子代>  兄弟+  父代^  重复*   成组()  ID :#   Class：.  属性：[]

二：React语法及特点介绍

1、什么是JSX？

①jSX=Java Script Xml，是基于ECMAScript的一种新特性；是一种定义带属性树结构的语法。

②JSX的特点：类XML语法容易接受、增强JS语义、结构清晰、抽象程度高、代码模块化。

2、JSX的语法

JSX的注释：多行/* */    单行//   

引用CSS样式：

条件判断的四种写法：三元表达式、使用变量、直接使用函数调用、使用  ||（或）运算符。

3、非DOM标准属性介绍：

dangerouslySetlnnerHTML：在JSX中直接插入HTML代码

ref：父组件引用子组件

key：提高渲染性能

3、JSX解释器架构介绍：

①源码阅读方法：从执行顺序入手、适当的忽略细节、重视写笔记、反复阅读；

三：JSX组件生命周期详解

1、组件的生命周期：组件本质上是状态机，输入确定，输出一定确定。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。可以用事件的思路来理解状态、但是状态之间是有联系的。

2、不同生命周期内可以自定义的函数：

初始化阶段：

getDefaultprops获取实例的默认属性（只会在组件第一个实例初始化时被调用，只调用一次，实例之间共享引用）;

getInitialState获取实例的初始化状态（初始化每个实例特有的状态）;

componentWillMount组件即将被装载（即将渲染到页面，是render之前最后一次修改状态的机会）;

render组件在render函数中生成虚拟的DOM节点JSX最后由react把虚拟的Dom节点渲染成真正的Dom节点并放置在页面中;（只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出）

componentDidMount在组件被装载之后调用的（成功render并渲染完成真实DOM之后触发，可以修改DOM）;

运行中阶段：

componentWillReceiveprops组件将要接收到属性时调用（父组件修改属性触发，可以修改新属性、修改状态）

shouldComponentUpdate当组件接收到新属性时就会触发，是让开发者决定组件是否更新（返回false会阻止render调用）

componentWillUpdate在render触发之前调用（这里是更新操作而不是装载操作）不能修改属性和状态

render只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出

componentDidUpdate在render加载完、真正的Dom被渲染完调用（可以改修DOM）；

销毁阶段触发的函数：

componentWillUnmount在销毁操作真正调用之前调用（在删除组件之前进行清理操作，比如计时器和事件监听器）

四：React属性和状态详解

1、属性的含义和用法：

props=properties 属性（一个事物的性质与关系）;属性往往是与生俱来的、无法自己改变。

属性的用法：

①键值对：<HelloWorld  name=   ?     />（？的值可以是"Tim",{123},{"Tim"},{[1,2,3],{variable},）

②展开语法：var props={

        one："123",

        two : 321      }

       <HelloWorld{...props}>

③instance.setProps（{name:"Tim"}）（实际很少用的一种方法）

2、状态的含义和用法： state  状态：事物所处的状态；状态是由事物自行处理、不断变化的；

状态的用法：

①getInitialState：初始化每个实例特有的状态

②setState：更新组件状态（steState--->diff算法--（改变了？）-->更新DOM）

3、属性和状态对比：

属性和状态的相似点：

①都是纯JS原生对象②都会触发render更新

③都具有确定性（给定了相同的属性或状态、组件生成的应该都是相同的代码）

属性和状态的对比：

总结：状态只和自己相关由自己来维护（既不和父组件相关也不和子组件相关）组件不能自己修改自己的属性；

组件和状态的区分方法：组件在运行时需要修改的数据就是状态（除此之外的组件都可以变成属性）；