这只是我的理解:具体知识点请参考官网.....
1 react是什么?
Facebook出的一款用于构建用户界面的js框架,我们可以通过它很容易的构建带有状态的组件
2 相比angular这些它有什么特点
灵活,轻量,只关注用户界面,组件化,虚拟dom,单向数据流
先说一下它的核心思想吧
> 函数式编程
首先我们你函数是什么?怎么出现的
可以重复使用的代码模块,你可以想象为我们盖房子时需要一个搅拌机,但是,按照面向过程的思想(这么说可能不准确),我们还要一步一步组装一个搅拌机?那么我们要盖第二个呢?还要组装吗?当然是我们做好一个之后,提供一些使用它的方法,再次需要,再次用就可以
==》 对应我们的界面呢? 一个简单的app,常包括
那我们可不可以把整个页面中多次使用的部分设计为组件(对应复用的代码,即函数),比如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以标签属性的方式传递
子组件传父组件
父组件传递一个事件的引用,在子组件中调用(以回调函数的形式)是以实参的形式传出来
何为回调函数?
这个比较难理解,我就说个生活中的场景吧,我们去点餐,一群人在哪儿排队,你吃完了我才能吃,想一想,我就在哪儿一直等着,,,,,,我特么不急么,后来,人们还是比较聪明的,你过来要吃的,我先给你一张票,我先做,你去干你自己的,等好了,我叫你(并把你要的东西给你),这就是回调,简单不?