JSX基本语法
元素属性
class 属性改为className;
for属性改为htmlFor;
Javascript属性表达式
属性值要使用表达式,只要用{}替换""即可。
HTML转义
React会将所有要显示到DOM的字符串转义,防止XSS。所以,如果JSX中含有转义后的实体字符,比如© 则最后到DOM中不会正确显示,因为React 自动把©中的特殊字符转义了。有几种解决办法:
直接使用UTF-8字符©;
使用对应字符的Unicode编码查询编码;
使用数组组装<div>{['cc',<span>©</span>,'2015']}</div>;
直接插入原始的HTML
此外,React提供了dangerouslySetInnerHTML属性。正如其名,它的作用就是避免React转义字符,在确定必要的情况下可以使用它:
<div dangerouslySetInnerHTML={{_html: 'cc © 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实现。