React学习路线

React学习路线

一、关于React

React 是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建UI。

React是Facebook开发的一套前端框架，仅仅是MVC中的V。核心思想是“封装组件”，组件封装后可以作为一个独立的实体被引入到新的组件中，这样新的组件就又是一个实体了，由于组件的实现了可复用，所以是大大减小了开发的工作量。

二、React特点

1. JSX

JSX（JavaScript XML）是js内定义的一套XML语法，最终被解析成js。在JSX中可以将HTML于JS混写。

2. 虚拟DOM，高效速度快，跨浏览器兼容

React之所以速度快，是因为其独特的特征——虚拟DOM（Document Object Model）。

虚拟DOM顾名思义不是真实的DOM，它不需要浏览器的DOM API支持。虚拟DOM是在DOM的基础上建立一个抽象层，其实质是一个JavaScript对象，当数据和状态发生了变化，都会被自动高效的同步到虚拟DOM中，最后再将仅变化的部分同步到DOM中。

3. 组件

组件是react的核心，一个完整的react应用是由若干个组件搭建起来的，每个组件有自己的数据和方法，组件具体如何划分，需要根据不同的项目来确定。

组件的特征是可复用，可维护性高。

4. 灵活

React只是MVC中的View层，自己无法构建大型的应用，需要与已有的框架和库来配合，如：、Flux（前端架构） 、Redux（状态管理）、Axios/Fetch（异步请求）等

5. React Native

React Native 是使用JavaScript和React编写的原生移动应用，在设计原理上与React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。React Native并不是“网页应用”或者说是“HTML5应用”又或者“是混合应用”，而是一个真正的移动应用。在使用感受上与C和JAVA编写的应用几乎是无法区分。React Native兼容了原生代码，应用的一部分用原生，一部分用React Native也是没问题的（如Facebook）。

三、React 三个重要属性

1.props属性

      1.每个组件对象都会有props（properties的简写）属性

      2.组件标签的所有属性都保存在props中

      3.内部读取某个属性值：this.props.propertyName

      4.作用：通过标签属性从组件外 向组件内传递数据（只读 read only）

      5.对props中的属性值进行类型限制和必要性限制

2.state 属性

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

3.refs 属性

在React数据流中，父子组件唯一的交流方式是通过props属性；如果要修改子组件，通过修改父组件的属性，更新达到子组件props属性的值，重新渲染组件以达到视图的更新。但是，有些场景需要获取某一个真实的DOM元素来交互，比如文本框的聚焦、触发强制动画等

4.props和state的区别

	 1. props中的数据都是外界传递过来的；
	 2. state中的数据都是组件私有的；（通过Ajax获取回来的数据，一般都是私有数据）
	 3. props中的数据都是只读的，不能重新赋值；
	 4. state中的数据，都是可读可写的；
	 5. 子组件只能通过props传递数据；

四、React 路由

1.安装

• 安装命令react-router-dom

  在项目命令行中，执行
  cnpm install react-router-dom -S
  下载到生产环境的依赖中。

2.React路由内置组件

在组件中通过对象的解构方式去获取到react-router-dom内置组件，在组件中，按需引入内置组件，在页面中进行使用：

• HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
• Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
• Link表示一个路由的链接

引入代码：

import {HashRouter,Route,Link} from 'react-router-dom'

3.注意

• Route 组件path地址是以/开头 ，配置component属性，是显示的组件，这个属性不可以大写
• Route组件可以单双标签使用，单标签需要/结尾，双标签不可以在中间写入别的东西
• Link to属性的地址也是/开头，Link在页面渲染的是a标签

五、Redux

redux对组件的数据做统一管理，方法多组件开发时实现传值问题

• 安装命令npm install redux