Reatct “思维”入门（基础）

前言

---

本文主要是针对思维上认识React，并不是React基础语法入门，有什么不正确的地方，可以留言指出，谢谢！！实战深入理解可以找前端大佬阮(ruan)一峰的入门实战教程。百度：“React入门 阮一峰”即可，有11个dom可供练习，都是很有针对性的dom。对React基本就属于基础中熟练了。

 

---

 

React的基本认识

1.官网

1) 英文官网: https://reactjs.org/

2) 中文官网: https://doc.react-china.org/

官方永远是最权威的，官方的介绍也会让你有不一样的理解，当对某个语法看不懂要学会查阅官方文档中的更新，一些旧语法会被弃用，新的方法会出现。

---

 

2.为什么要用React？

   首先，React.js不是一个框架，它是一个JavaScript库，在MVC思想中，你可以将React看作为视图层，并且是一个高效 的视图（高效的渲染页面）。

   1)网页早期就不讲了，在React这类库出现之前，人们已经会使用JavaScript在浏览器端渲染网页。这些类库使用的方法也不尽相同，简单的会使用带参数的模板，复杂的就完全掌握整个应用。随着开发者在越来越大的应用中使用这些类库，网页变得不那么好控制和维护。

  2）React的出现就是为了这个，React有能力处理大型web应用的交互需求，并且使之从极端复杂，异常繁琐，变得相对简单且性能优越。

---

 

3.React入门基本思维

 

   JSX 、组件、Props & State、 ReduX

---

 

1）JSX ：JavaScript的语法扩展(XML+JS),既然有JavaScript中的，大家很快就会熟悉他

•  
•  
•  

<script type="text/babel" >   let dom = <div>hello JSX {data? '存在':'不存在'}</div></script>

大家可以看到 dom 这个变量，没有引号，就是纯标签但不属于HTML，只需要把JS操作在{ }里面进行，它合理的存在。当然这是需要有babel.js 配合React 的前提下，JSX就是用来声明React当中的虚拟DOM，React使用JSX来描述用户界面,这也是数据驱动视图的变化的基本，当{}里面的内容发生改变，React有diff 算法计算出 虚拟 DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。

---

 

2）组件：一个页面可以拆分成不同区域(如： 头部、底部、侧边栏),区域又可以拆成不同的"功能块"(如:搜索栏、分类列表、轮播图),功能块 就可以称为组件，你可以在很多页面复用，当然你的组件也可以更大，定义组件的方法大家去阮一峰老师的实战再去感受，你要去明白组件是怎样的存在

     ①JSX渲染到<div>里面，形成页面，但大量的JSX 岂不是又跟以前一样了?所以按功能或者其它来封装到组件里，封装之后可以复用，易管理维护。

     ②组件里面再放组件的思维是需要去明白的，像似俄罗斯套娃但又不一样，可以封装复用的才是核心。

     ③组件即页面的思维，每个组件都应该包括一些内部状态，处理逻辑，和事件处理器（例如按钮点击、输入改变）， 当然也包括一些内部的样式。

---

 

3）Props & State

数据驱动视图变化，上面讲到了组件里面再放组件，那我怎么才能在最外面的组件操作最里面组件的数据呢，这就是涉及到组件与组件之间的通信，

      ① 组件可以说是封闭的，要接收外界传来的数据只能通过Props进行，因此React当中的数据流是单向的：Props只能从父传子，反过来子传父是不行的

       ② 子传父的时候怎么办呢？这时候就要用到state，首先父组件要定义一个函数，用函数的参数来接收子传过来的数据，之后父组件把这个函数传给子组件，子组件想要传值只需要把在自身的state作为这个函数的参数即可。

     但是上面组件说到，俄罗斯套娃，当组件套组件套得多的时候，总不能传个值，不断的往下传把，那太麻烦了。这时候就需要Redux

 

4）ReduX

• redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库) 

• 它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用 

• 作用: 集中式管理 react 应用中多个组件共享的状态

• 他的工作流程：

 

什么情况下需要使用 redux 

• 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用

• 某个组件的状态，需要共享

• 某个状态需要在任何地方都可以拿到

•  一个组件需要改变全局状态 

• 一个组件需要改变另一个组件的状态