react小解

这只是我的理解：具体知识点请参考官网.....

1 react是什么？

Facebook出的一款用于构建用户界面的js框架，我们可以通过它很容易的构建带有状态的组件

2 相比angular这些它有什么特点

灵活，轻量，只关注用户界面，组件化，虚拟dom，单向数据流

先说一下它的核心思想吧

> 函数式编程

首先我们你函数是什么？怎么出现的

可以重复使用的代码模块，你可以想象为我们盖房子时需要一个搅拌机，但是，按照面向过程的思想（这么说可能不准确），我们还要一步一步组装一个搅拌机？那么我们要盖第二个呢？还要组装吗？当然是我们做好一个之后，提供一些使用它的方法，再次需要，再次用就可以

==》 对应我们的界面呢？ 一个简单的app，常包括

组件小解.png

那我们可不可以把整个页面中多次使用的部分设计为组件（对应复用的代码，即函数），比如button组件， 列表组件，列表中每个item组件等，关于组件如何划分（请参考蚂蚁的ant design 或者 饿了么的 element）

我们可以这样，定义一个危险按钮（dangerButton）

jsx语法

Let DangerButtn = function(text) {

Return <button style={{color: ‘red’}}>{text}<button>

}

Html

<div width=”222px”>

<p>只有对一千件事情说不，才能确保我们不会误入歧途或浪费过多尝试</p>

</div>

对应在js我们可以这样描述

Let no = {

Name: ‘div’,

Prop: width,

Childen: [{

Name: p,

Childen: ‘有对一千件事情说不，才能确保我们不会误入歧途或浪费过多尝试’

}]

}

> 虚拟dom

众所周知，频繁的操作dom是前端性能的杀手，那么我们如何避免呢？以前我们可能考虑的都是比如通过事件委托等方法来提高性能，但是，react却颠覆性的，另辟蹊径的提出了虚拟dom的概念。这就是，为什么？ react能成为react的原因

如上所示，dom既然可以使用json那种结构来描述，那我们就可以在内存中构建一个虚拟的dom树，当我们去操作dom（点击事件等）时，react会立刻构建一个虚拟树，然后通过与最初的dom树比较（根据diff算法）,来看那部分做了改变，并把真正改变的渲染在真实的dom结构中，so,它非常高效，所以也适用于移动端

3 组件的状态，组件间是如何传递数据的

何为状态？

这个问题并没有确切的答案，就像是一个事物（人）自身所带的一些东西一样，

首先你要明确，状态是会变化的，（像不像你的一生，你自己感受一下），不过它会有一个初始的状态，就像刚生下来的你（初学者的心态）

状态为什么会变？

首先你要明白，js是一个事件驱动的客户端脚本语言，

状态的改变通常伴随着事件处理函数

只要是变化的，你都放到状态里面管理就可以

父组件传子组件

 Props以标签属性的方式传递

子组件传父组件

父组件传递一个事件的引用，在子组件中调用（以回调函数的形式）是以实参的形式传出来

何为回调函数？

这个比较难理解，我就说个生活中的场景吧，我们去点餐，一群人在哪儿排队，你吃完了我才能吃，想一想，我就在哪儿一直等着，，，，，，我特么不急么，后来，人们还是比较聪明的，你过来要吃的，我先给你一张票，我先做，你去干你自己的，等好了，我叫你（并把你要的东西给你），这就是回调，简单不？