react基础

react简介

react是Facebook在2013年开源在github上的javascript库。react把用户界面抽象成一个一个组件，如按钮组件Button，对话框组件Dialog，日期组件Calendar。开发者通过组合这些组件，最终得到功能丰富，可交互的页面。通过引入JSX语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象,React把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到DOM来开发网页外，还能用与原生移动应用（React native）。

react并不是完整的MVC/MVVM框架，它专注与提供清晰，简洁的View层解决方案

virtual DOM

真实页面对应的是一个DOM树，每次更新元素都需要手动操作DOM。而操作DOM的代价是非常大的，而React将真实DOM树转换成javascript树,也就是Virtual DOM。每次数据更新后都需要重新计算Virtual DOM，并和上一次的Virtual DOM做对比，对发生变化的部分做批量更新。React也提供了直观的shouldComponentUpdate生命周期回调，来减少数据变化后不必要的Virtual DOM 对比过程，以保证性能。

 

函数式编程是react的精髓

JSX语法

虚拟元素可以理解为真实元素的对应，它的构建与更新都是在内存中完成的，并不会真正渲染到DOM元素中去。

在React中创建的虚拟元素可以分为两类，分别对应DOM元素与自定义元素。

DOM元素

<button class="btn btn-blue">
    <em>Confirm</em>
</button>

转化为JSON对象

{
    type: 'button', //标签类型
    props: {            //标签属性
        className: 'btn btn-blue',    //类名
        children: [{        //所包含的子标签
            type: 'em',
            props:  {
                children: 'Confirm'
            }
        }]
    }
}

组件元素

const Button = ({ color, text}) => {  //可以传任意的参数生成对应的组件
    return {
        type: 'button',
        props: {
            className: 'btn btn-${color}',
            children: {
                type: 'em',
                props: {
                    children: text,
                },
            },
        },
    };
}

但事实上你能发现这种JSON的写法把我们的三行HTML变成了一个巨大的JSON对象，所以HTML是比JSON描述起来更加简单的语言，此时JSX应运而生，将HTML语法直接加入到javascript中。

JSX的官方定义是类XML语法的ECMAscript扩展。

XML基本语法

const List = () => (
    <div>
        <Title> This is title</Title>
        <ul> 
            <li> list item</li>
            <li> list item</li>
            <li> list item</li>
        </ul>
    </div>
);
 

定义标签时，只允许被一个标签包裹，否则的话就会报错

标签一定要闭合

另外HTML标签首字母是否为小写字母，其中小写字母对应DOM元素，而组件元素自然对应大写字母

元素属性

元素除了标签之外，另一个组成部分就是标签的属性。

在JSX中，不论是DOM元素还是组件元素，它们都有属性。DOM元素的属性时标准规范属性，但有两个例外-- class 和 for，因为在javascript中这两个单词都是关键字，因此我们需要转换

class -> className

for -> htmlFor

Boolean属性默认为true

展开属性

const component = <Component name = {name} value = {value} />;

//如果不知道要设置哪些属性

const component = <Component />;
component.props.name = name;
component.props.value = value;

const data = { name: 'foo', value: 'bar' };
const component = <Component {...data} />;

自定义HTML属性

在DOM元素中传入自定义属性必须要使用data- 前缀，这与HTML标准也是一致的

在自定义标签中任意的属性都是被支持的

javascript属性表达式

属性值要使用表达式，只要用 {} 替换成 " "即可

const person = <Person name={window.isLoggedIn ? window.name : ''} />;

HTML转义

react会将所有要显示到DOM的字符串转义，防止XSS。

如果JSX中含有转义后的实体字符串，则在DOM中不会正确显示

React提供了dangerouslySetInnerHTML属性。正如其名，它的作用就是避免React转义字符

<div dangerouslySetInnerHTML={{__html: 'cc &copy; 2015'}} />

有2个{{}}，第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

这个会直接显示&copy，不会进行转义