react基础（react设计模式与最佳实践读书笔记001）

声明式编程

react如此强大的原因在于其声明式编程的使用。那么如何更加具体的阐释两者的区别呢？

我们以一个真实的伪代码场景来对比区别：

命令式编程：
- 从架子上拿一个酒杯
- 将被子放到酒杯前
- 按下酒桶开关，将杯子倒满
- 把杯子递给我

声明式编程：
- 请给我倒一杯啤酒

从上面的结果我们可以看出，声明式编程会更加容易操作，可维护，但是这也建立在一个前提下：就是需要服务员知道如何提供啤酒。

使用声明式编程时，开发人员只需要知道想要实现什么目的，无须列出实现效果的所有步骤。

声明式编程使得react很容易使用，因此最终的代码也很简单，这样产生的bug很少，可维护性增强。

react元素

react核心是使用元素这种特殊的对象来绘制ui流程，元素描述了屏幕上需要展示的内容，这些不可变对象比实现组件和组件实例要简单的多，而且只包含了展示界面锁需要的信息。

{
    type:Title,
    props:{
        color:'red',
        children:'hello world'
    }
}

其中很重要的一个特性是type，它告诉react如何处理元素本身，实际上如果type属性是字符串，就表示元素是dom节点；如果type属性是函数，那么元素就是组件。

dom元素和组件可互相嵌套，以表示整个渲染树。

比如下面的实例：

{
    type:Title,
    props:{
        color:'red',
        children:{
            type:'h1',
            props:{
                children:'hello,h1'
            }
        }
    }
}

特别的：当type为函数的时候，react会调用它，传入props来取回底层元素。然后react会一直对返回操作做相同的操作，直到取回完整的dom节点，这个过程称为一致性比较。

技术点分离与耦合 <=> 组件式开发

在过去的开发中，我们一直采用的方式都是按照技术点分离。比如把css\js\html分别放到不同的文件夹，但实际上css对应的选择器标签，js操作对应的dom对象以及样式都不能互相独立开，每一个的改动都会影响另外一个。这就导致了耦合。

而react则使用另外一种维度解决这个问题，它通过建议你编写名为组件的小型代码块来组织应用。

react的最终目标也是将创建组件所有相关的每个技术都封装起来，并根据他们的领域和功能进行关注点分离。

let style = {
    color:'white',
    backgroundImage:'url(q.png)'
};

ReactDOM.render(
  <div style={style}>Hello World</div> 
 );

常见误解：react一定要使用很多包、技术生态

其实作为开发一个最普通的react组件，只需要引入react核心库以及react-dom。

而对于其他的引入只是你需要对应的支持时才需要的按需引入，比如支持jsx语法，支持路由，支持转义等。

所以当你看到一个组件引入了很多包时，不用紧张，每个单独分析是用来支持什么功能的就好，大部分都不是react核心编码需要的。这个就和jq框架一样，引入库文件之后，你需要其他的样式文件， 插件文件都是可以的，这个和jq本身没有直接关系。

当然react官网提供了一个简单的脚手架，让我们可以快速的设置一些基本的模板，引入,它就是create-react-app.