react基础

react基础API
没有学react的同学请看完这篇教程再看API
http://www.ruanyifeng.com/blog/2015/03/react.html

JSX 语法

1. 在变量中可以使用 var element = <h1>hello world</h1>; 来定义React元素
2. 在定义的 React元素 中如果要使用变量的替换, 使用{} : var text = 'hello world'; var element = <h1>{text}</h1>;
3. 在定义的 React元素 中的style属性时, 需要使用{} : var element = <h1 style={fontSize: 16, textAlign: center}>hello world</h1>;
4. 在定义的 React元素 中需要加入注释时, 需要使用{}来包裹: var element = <h1>hello world{/*注释*/}</h1>;
5. 在使用React.createClass({object})时, 必须以大写开头的变量来接收

React API

1. React.createClass({object}): 创建一个组件, 可传入一个object类型数据

   • render(Function): 组件的渲染, 应该返回一个HTML
   • getInitialState(Function): 默认的状态, 状态改变后会重新调用render来渲染组件
   • getDefaultProps(Function): 默认的属性, 设置默认的属性值, 如果调用插件时没有传入就自动使用默认值
   • componentWillMount(Function): 组件渲染前执行的方法
   • componentDidMount(Function): 组件第一次渲染完成后执行的方法
   • componentWillReceiveProps(Function): 组件接收到新的prop时被调用, 这个方法初始发render时不会触发
   • shouldComponentUpdate(Function): 组件接收到新的prop或state时被调用, 如果返回false, 则不更新渲染组件, 在使用forceUpdate时不会触发, 初始化时不会触发
   • componentWillUpdate(Function) 组件接收到新的prop或reate但还没有进行刷新时调用, 初始化时不会触发
   • componentDidUpdate(Function): 组件更新完成后立即调用, 初始化时不会触发
   • componentWillUnmount(Function) 组件被移除时被调用
   • propTypes: 组件校验器, 对组件传入的数据进行校验, 如果失败将在控制台抛出异常
   • *: 其他的函数或属性, 可以使用this.*来获取

2. 在React.createClass({object})回调函数中可使用的值

   • this.setState({object}, callback): 设置/修改状态值, 修改成功并重新渲染完成后会调用callback
   • this.setProps({object}, callback): 设置/修改属性值, 修改成功并重新渲染完成后会调用callback
   • this.replaceProps({object}, Function): 替换属性并刷新, 第二个参数为回调函数, 在刷新完成后调用
   • this.replaceState({object}, Function): 替换状态并刷新, 第二个参数为回调函数, 在刷新完成后调用
   • this.state.value: 获取当前状态值
   • this.props.value: 获取当前属性值
   • this.isMounted(): 判断组件的挂载状态, 如果已经在DOM中则返回true
   • this.forceUpdate(Function): 强制刷新, 其实就是重新调用render对组件进行刷新
   • this.refs.Children: 获取组件中传入的dom, 始终返回数组
   • this.refs.children: 获取组件中传入的dom, 如果没有传入返回undefined, 如果传入了1个dom元素返回一个object类型数据, 如果传入多个dom元素, 返回一个array类型的数据

3. 校验器propTypes规则

   • React.PropTypes.array: 指定当前prop属性为数组类型的数据
   • React.PropTypes.bool: 指定当前prop属性为布尔类型的数据
   • React.PropTypes.func: 指定当前prop属性为函数类型的数据
   • React.PropTypes.number: 指定当前prop属性为数值类型的数据
   • React.PropTypes.string: 指定当前prop属性为字符串类型的数据
   • React.PropTypes.object: 指定当前prop属性为对象类型的数据
   • React.PropTypes.node: 指定当前prop属性为可以对渲染的对象(number, string, element, array...)
   • React.PropTypes.element: 指定当前prop属性为React元素数据
   • React.PropTypes.instanceOf(Message): 指定当前的prop属性为某个React组件的实例
   • React.PropTypes.oneOf(['News', 'Photos']): 指定当前的prop属性为指定的值
   • React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]): 指定当前的prop属性为满足多个校验器中的一个
   • React.PropTypes.arrayOf(React.PropTypes.number): 指定当前的prop属性为数组, 且数组成员必须满足某个校验器的规则
   • React.PropTypes.objectOf(React.PropTypes.number): 指定当前的prop属性为对象, 且数组成员必须满足某个校验器的规则
   • React.PropTypes.shape({color: React.PropTypes.string, fontSize: React.PropTypes.number}): 特定 shape (style) 参数的对象规则
   • React.PropTypes.func.isRequired: 任意校验器后加上isRequired使该prop属性不能为空
   • React.PropTypes.any.isRequired: 指定的prop属性可以传入任意数据, 但不能为空
   • function: 校验器中如果传入一个function, 则为自定义校验器, 如果验证失败需要返回一个 Error 对象, 不要直接使用 console.warn 或抛异常，因为这样 oneOfType 会失效

         function(props, propName, componentName) {
             if (!/matchme/.test(props[propName])) {
                 return new Error('Validation failed!');
             }
         }
     

ReactDOM API

1. ReactDOM.render(reactClass, element): 渲染一个组件到DOM元素上
2. ReactDOM.findDOMNode(this): 获取DOM, 与React回调函数中的this.refs.Children不同, 改函数返回的是实际的DOM元素, 以及该函数返回的元素本身而不是子元素

ReactClass 的使用

1. 可以使用 <ReactClass name="100" />的方式:

       ReactDOM.render(
           <ReactClass name="100" />,
           document.body
       );
   

2. 如果需要传入dom, 可以使用 <ReactClass name="100"></ReactClass> 的方式:

       ReactDOM.render(
           <ReactClass name="100">
               <li>hello world</li>
           </ReactClass>,
           document.body
       );