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实现。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!