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實現。