React从入门到项目--第一天（React基本使用）

React是什么

React的出现有点玄幻的，刚开始是在Facebook 的内部项目中使用的，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，后来发现很好用，结果就开源了。

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面。React是基于组件进行编程，一个一个的组件，合在一起组成一个完整的项目。使代码更加清晰明了，而且有利于代码的维护。

和vue的初步接触类似的是，刚开始的时候不建议直接使用脚手架进行项目搭建，从最简单的代码开始，不同的是vue只需要引入一个文件，而React需要引入三个文件，分别是react.development.js和react-dom.development.js，还有babel，刚开始接触的bable的作用是将ES6的代码转为ES5，后了解到，babel的作者加入了Facebook后，在babel中加入了部分内容，后来的babel还可以将JSX的代码转化为JS的代码。

React基本使用

1、HelloWorld

const myText = 'Hello React !';

const myId ='test';

// 1.创建虚拟DOM
const element1 = <h2 id={myId.toLowerCase()}>{myText.toUpperCase()}</h2>;

// 2.渲染虚拟DOM
ReactDOM.render(element1,document.getElementById('text1'));

效果如下：

 

React的代码在页面中只有一个空白的div，之后在JS中创建虚拟DOM，然后通过ReactDOM的render方法将数据及相关的标签渲染成真实的DOM。JS的代码因为使用了JSX，所以在引用JS的地方需要说明类型,不能再使用原来的text/javaScript了，需要使用text/babel，才能识别JSX的语法。

<script type="text/babel" src="....."></script>

2、列表渲染

React在进行数组的遍历的时候，需要注意的一点是，需要将字符串的数组转化为标签的数组，动态的创建<li>的虚拟DOM，在这其中，主要用到了数组的map方法。

const LIST = ['zepto','jquery','vue','react','layui'];
// 1.创建虚拟DOM
const UL = (
    <ul>
        {
            LIST.map((name,index) => <li key={index}>{name}</li> )
        }
    </ul>
);
// 2.渲染虚拟DOM
ReactDOM.render(UL,document.getElementById('component'));

在不只一个标签的情况下，虚拟DOM元素最好用小括号括一下，这样说让代码看起来更加的整洁。

Array.map(function(currentValue, index, arr){
    console.log(currentValue);
    console.log(index);
    console.log(arr);
},thisValue)

接下来就是map方法了，在它的回调函数中可以传入三个值：currentValue表示当前元素的值，index是当前元素的下标，arr是当前元素所属的数组对象，就是例子中的Array。thisValue为可选值，对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

在上述例子中需要注意的是，使用了ES6的箭头函数，但是没有加{}，那是因为在箭头函数中，在{}中包裹的为函数的函数体，需要有一个返回，即return，而不加{}，则表示直接进行了返回。例如下面两个函数的作用是相同的：

(num1,num2){
    const num = num1+num2;
    return num
}

(num1,num2) => num1+num2

结果就会在HTML页面上展示出包含数组长度个li的ul，需要注意的是需要给每一个li添加一个各不相同的key，所以我们在做的时候选择传入它的下标。

3、组件标签

组建标签的创建有两种方式，分别是工厂函数方式构建虚拟DOM，和ES6类组件方式构建虚拟DOM，相对来说第一种方式更加的简单。第一种方式会直接返回一个组件标签，而第二种方式会创建Component的实例对象，调用相应的render方法，渲染的时候，直接渲染组件标签即可。

//1.定义组件

function MyComponent(){
    return <h2>工厂函数方式构建虚拟DOM</h2>
}

class MyComponent2 extends React.Component{
    render(){
        return <h3>ES6类组件方式构建虚拟DOM</h3>
    }
}

//2.渲染组件标签

ReactDOM.render(<MyComponent /> , document.getElementById('component'));
ReactDOM.render(<MyComponent2 /> , document.getElementById('component2'));