react基础学习

1. 什么是react:React（有时称为React.js 或ReactJS）是一个为数据提供渲染HTML视图的开源JavaScript库;
2. 其特点：

   声明式设计：采用声明范式，可以轻松描述应用
   高效：通过对DOM的模拟，最大限度减少与DOM的交互
   灵活：可以方便的搭配其它库来使用
   JSX：是js语法的扩展
   组件：构建组件，方便复用
   数据：单向相应的数据流

3. 核心思想：封装组件
4. 劣势与缺点：（地上不是没有坑，走的人多了也就踩出来了）

   在你选择之前需要再考虑一下：
   ①一开始 React 会极大地减慢你的开发。理解props、state以及组件通信如何工作并不是很简单，并且文档信息错综复杂。理论上，这将会被克服，你的整个团队都上道之后，开发速度上就会有一个很大的提升。
   ②React 不支持 IE8 以下的任何浏览器，以后也绝不会。
   ③如果你的应用/站点不需要频繁的动态页面更新，你可能为了很小的功能而编写大量的代码。
   ④你会改造很多轮子。React 很年轻，并且因为没有权威的方式来处理事件、组件通信，你必须从零开始创建大量的组件库。你的应用是否有下拉菜单，可调整大小的窗口，或者 lightbox？你同样必须从零开始写这些。

5. 搭建React的开发环境：引入react.js react-dom.js browser.js 三个js文件
   
6. 基本语法：jsx语法

   遇到HTML标签（以 < 开头），就用HTML来解析；
   遇到代码块（以 { 开头）就用js来解析

   ---

• 创建组件（目前感觉有点面向对象的思想，感觉构造函数更像）

  React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。
  React.createClass 方法就用于生成一个组件类
  
  
  复杂一点的复合组件：将其他的组件 整合在一起 创建的新组件  积木+积木--》乐高机器人

  

• 引用组件：
  
  
  　
• props属性对象
  
  组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMsg name="daxu"> ，就是 HelloMsg 组件加入一个 name 属性，值为 daxu。
  组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。
  
  基本用法：
  
  
  
  this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点
  
• ref属性：

  组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。
  根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
  但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性
  

• 状态state:
  

  介绍：
  组件免不了要与用户互动，React的一大创新，就是将组件看成是一个状态机，
  一开始就有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI。
  具体实现起来，React里有个state，只要更新组件的state，
  然后根据state重新渲染用户界面（不要操作DOM），React来决定如何最高效的更新DOM。
  
  方法：

  方法1：getInitialState 定义初始状态，也就是一个对象
  方法2：setState 可以获取getInitialState中定义的对象，
  如果调用setState修改了状态值，
  每次修改后，都将自动调用this.render方法，再次渲染组件
  读取状态：this.state.name this.state.age....

  

• 生命周期：
  
  阶段：

  Mounting 已经插入真实DOM
  Updating 正在被重新渲染
  Unmounting 已经移出DOM
  
  处理函数：

  componentWillMount() 准备插入
  componentDidMount() 已经插入
  componentWillUpdate(object nextProps, object nextState) 准备更新
  componentDidUpdate(object prevProps, object prevState) 已经更新
  componentWillUnmount() 准备从DOM中移除。
  
  注意：ref 的使用必须是在componentDidMount之后；update相关的处理函数是有参数的

• 事件：
  

  React 标准化了事件对象，因此在不同的浏览器中都会有相同的属性。
  组件createClass后创建的是许多方法组成的对象。
  组件中使用的方法分为React自有的方法与用户定义的方法。
  ①其中React自有方法是组件生命周期中的方法，
  如：render、componentWillUpdate、componentDidMount等。
  ②用户自定义的方法可以起符合JS命名规范的方法就可以（最好使用驼峰命名），
  如：handleClick、handleChange、handleMouseover等。
  
  

• 表单：
  

  状态属性：
  表单元素有这么几种属于状态的属性：
  value，对应 <input> 和 <textarea> 所有，
  checked，对应类型为 checkbox 和 radio 的 <input> 所有，
  selected，对应 <option> 所有
  
  对于设置了上面提到的对应“状态属性“值的表单元素就是受控表单组件
  一个受控的表单组件，它所有状态属性更改涉及 UI 的变更都由 React 来控制（状态属性绑定 UI）
  如果你希望输入的内容反馈到输入框，就要用 onChange 事件改变状态属性 value 的值
  使用这种模式非常容易实现类似对用户输入的验证，或者对用户交互做额外的处理。