React简介

React是一款颠覆式的前端解决方案，其创新的编程思想以及衍生出来的一些生态圈技术可以说是引领了整个前端的发展。

每一种新事物的出现都是为了解决某些问题，React也不例外。所以了解了它要解决的问题，就能更好的接受这个新的框架。在React出现之前，原生的JavaScript有哪些痛点：

• 原生JavaScript操作DOM繁琐、效率低。
• 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
• 原生JavaScript没有组件化编码方案，代码效率低。

为什么要选择React？

• 其声明式的语法可以让你直观的去描述和组织复杂的界面逻辑
• 其繁荣的生态圈则为解决各种问题带来了大量的最佳实践
• 其活跃的技术社区则让你在遇到问题的时候 能快速得到帮助
• React技术栈不仅可以让你从容面对大型项目的开发其编程思想还可以运用到React Native进行原生开发
• 其server端渲染的技术则可以让你进行同构的后端开发

React特点

• 组件化模式、声明式编程
• 使用React Native可以使用React语法进行移动端开发
• 使用虚拟DOM，尽量减少与真实DOM的交互

命令式编程 VS 声明式编程

举个生活中例子，假设你去酒吧喝啤酒，命令式方式的指示：

1、从架子上拿一个玻璃杯；
2、将杯子放到酒桶前；
3、按下酒桶开关，将杯子倒满；
4、把杯子给我。

而声明式方式，你只需要说：“请给我一杯啤酒。”

注意：按照声明式方式点一杯啤酒，需要假设服务员知道如何提供啤酒，这是声明式编程工作原理的一个重要方面。

接着，我们再来看一个JavaScript代码的示例：编写一个简单函数，给定包含大写字符串的数组时，该函数返回包含相同的小写字符串的数组

命令式编程

const toLowerCase = input => {
    const output = [];
    for (let i = 0; i < input.length; i++) {
        output.push(input[i].toLowerCase())
    }
    return output;
}

toLowerCase(['FOO', 'BAR']) //['foo', 'bar']

声明式编程

const toLowerCase = input => input.map(
    value => value.toLowerCase()
)

toLowerCase(['FOO', 'BAR']) //['foo', 'bar']

组件化方式进行UI构建

评论UI组件化

代码如下：

class CommentBox extends Component {
    render() {
       return(
         <div>
           <h1>评论区</h1>
           <CommentList />
           <CommentForm />
         </div>
       )
    }
}

学习React之前您需要的储备知识

• JavaScript基础（this的指向、数组的常用方法、原型链等）
• 掌握ES6语法规范（class类的基础知识，箭头函数等）
• 会使用npm包管理器
• 需要对模块化有一定的了解