react中的tips

2019独角兽企业重金招聘Python工程师标准>>>

React中的jsx
（1）Jsx实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码。
JSX转化器

要把带有JSX语法的代码转化为纯Javascript代码，有多种方式，对于内联与HTML中的代码或者是未经过转化的外部文件，在 script 标签中要加上 type="text/jsx" ，并引入 JSXTransformer.js 文件即可，不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用 npm 全局安装 react-tools ：

npm install -g react-tools

并使用命令行工具转化即可（具体用法可以参考 jsx -h ）：

jsx src/ build/

（2）react 组件
React.createClass 方法就用于生成一个组件类,例如：
var component = React.createClass ({
    render:function(){
       return  <h1>Hello {this.props.name}</h1>;
    }
});
要想运用组件，只需要闭合该组件即可，例如：
ReactDOM.render(
  <HelloMessage name="sunshine" />,
  document.getElementById('container')
);
只要网页模板中插入：<HelloMessage/>就意味着实例化一个上面的组件，在使用组件的时候，需要注意如下几点：
（1）组件名首字母需要大写，否则会报错，也就是上面的HelloMessage不能写为helloMessage
（2）组件只能包含一个顶部标签，不能写为如下形式：
var component = React.createClass ({
    render:function(){
       return  <h1>Hello {this.props.name}</h1>
       <div>this is a test</div>;
    }
});
上面有h1和div两个顶级标签，所以会发生错误
（3）避免与关键字class相冲突，在定义dom的类名的时候，需要定义为className，例如：
var component = React.createClass ({
    render:function(){
       return  <h1 className="title">Hello {this.props.name}</h1>
    }
});
(4)如果需要为dom节点添加相应的样式，可以直接定义该dom元素的样式，但是这里的样式不再是字符串，而是对象，如需定义这种样式：margin-left,需要写成小驼峰命名法marginLeft,例如：
var component = React.createClass ({
    render:function(){
       return  <h1 className="title" style={{fontSize:13,color:'red'}}>Hello {this.props.name}</h1>
    }
});
(5)可以为组件传入属性，可以用this.props 和 this.props.children来获取属性，this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。
除了使用this.props来获取属性之外，还可以用this.state来获取属性，两者之间的区别为：props 是不可变的：它们从父组件传递过来，“属于”父组件，通过props获取的属性一般是从外部获取的。为了实现交互，我们给组件引入了可变的 state 。this.state 是组件私有的，是组件内部使用的一些属性，可以通过调用 this.setState() 来改变它。当 state 更新之后，组件就会重新渲染自己
使用setState()函数可以来更新内部的state
（6）组件的生命周期：
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

        componentWillMount()
        componentDidMount()
        componentWillUpdate(object nextProps, object nextState)
        componentDidUpdate(object prevProps, object prevState)
        componentWillUnmount()

详细信息请移步：http://react-china.org/t/react/1740

（7）refs属性
我们利用 ref 属性给子组件命名，通过 this.refs 引用 DOM 节点。
var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = this.refs.author.value.trim();
    var text = this.refs.text.value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit({author: author, text: text});
    this.refs.author.value = '';
    this.refs.text.value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});
如上所示，在handleSubmit()中，我们通过this.refs.text来获取表单中ref为text的文本框的dom
（8）事件：
React 使用驼峰命名规范的方式给组件绑定事件处理器。我们给表单绑定一个onSubmit处理器，用于当表单提交了合法的输入后清空表单字段。

在事件回调中调用 preventDefault() 来避免浏览器默认地提交表单。
如上例所示

（9）获取默认的props值
React 支持以声明式的方式来定义 props 的默认值。

var ComponentWithDefaultProps = React.createClass({
  getDefaultProps: function() {
    return {
      value: 'default value'
    };
  }
  /* ... */
});

当父级没有传入 props 时，getDefaultProps() 可以保证 this.props.value 有默认值，注意 getDefaultProps 的结果会被 缓存。得益于此，你可以直接使用 props，而不必写手动编写一些重复或无意义的代码。
（10）表单组件
表单组件支持几个受用户交互影响的属性：

    value，用于 <input>、<textarea> 组件。
    checked，用于类型为 checkbox 或者 radio 的 <input> 组件。
    selected，用于 <option> 组件。
1：表单组件中的受限组件：对于定义了value值的表单元素：
  render: function() {
    return <input type="text" value="Hello!" />;
  }

  上面的代码将渲染出一个值为 Hello! 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为 Hello!。如果想响应更新用户输入的值，就得使用 onChange 事件：
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <input type="text" value={value} onChange={this.handleChange} />;
  }
  2：不受限组件：没有设置value值或者value值为null的表单组件
    render: function() {
    return <input type="text" />;
  }
  上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受限元素一样，使用 onChange 事件可以监听值的变化。

转载于:https://my.oschina.net/sunshinewyf/blog/652334