react学习(二)

JSX基本语法

元素属性

class 属性改为className;
for属性改为htmlFor;

Javascript属性表达式

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

HTML转义

React会将所有要显示到DOM的字符串转义，防止XSS。所以，如果JSX中含有转义后的实体字符，比如© 则最后到DOM中不会正确显示，因为React 自动把©中的特殊字符转义了。有几种解决办法：

1. 直接使用UTF-8字符©;

2. 使用对应字符的Unicode编码查询编码;

3. 使用数组组装<div>{['cc', <span>©</span>, '2015']}</div>;

4. 直接插入原始的HTML

此外，React提供了dangerouslySetInnerHTML属性。正如其名，它的作用就是避免React转义字符，在确定必要的情况下可以使用它:

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

React 与Web Components

React组件的构建方法

React.createClass

const Button = React.createClass({
    getDefaultProps() {
        return {
            color: 'blue',
            text: 'confirm'
        };
    },
    
    render() {
        const {color, text} = this.props;
        
        return (
            <button className={'btn btn-${color}'}>
                <em>{text}</em>
            </button>
        );
    }
});

ES6 classes

import React, {Component} from 'react';

class Button extends Component {
    constructor(props) {
        super(props);
    }
    
    static defaultProps = {
        color: 'blue',
        text: 'Confirm'
    }
    
    render() {
        return (
                <button className={'btn btn-${color}'}>
                    <em>{text}</em>
                </button>
         );
    }
}

React 数据流

state 与props 是React组件中最重要的概念。如果顶层组件初始化props, 那么React会向下遍历整棵树，重新尝试渲染所有相关的子组件。而state只关心每个组件自己内部的状态，这些状态只能在组件内改变。把组件看成一个函数，那么它接受了props作为参数，内部由state作为函数的内部参数，返回一个Virtual DOM实现。