React入门笔记

2016年2月24日

说明

React使用jsx语法，script标签的type值必须为“text/jsx“！在jsx语法中遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以{开头），就用js规则解析。 jsx 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

语法说明

数组

var arr = [
    <span>hello</span>,
    <span>world</span>
];
ReactDOM.render(
     <div>{arr}</div>,
     document.getElementById(“example")
)

输出

html

<div><span>hello</span><span>world</span></div>

ReactDOM.render是React的基本方法，用于将模板转为HTML，并插入指定的DOM节点：(第一个参数为模板，第二个参数为dom对象)

ReactDOM.render(
     <h1>Hello, world!</h1>,
     document.getElementById(‘example')
)

React.createClass是React创建组件的方法，组件标签必须首字母大写，组件中包含：

this.props对象，用来获取属性值, {…this.props}用来复制组件的所有属性，如：

var CheckLink = React.createClass({
     render: function() {
          // 这样会把 CheckList 所有的 props 复制到 <a>
          return <a {...this.props}>{'√ '}{this.props.children}</a>;
     }
});
  
ReactDOM.render(
     <CheckLink href="/checked.html" target="_blank">
          Click here!
      </CheckLink>,
      document.getElementById('example')
);

可以使用结构赋值的方式传递属性：

var FancyCheckbox = React.createClass({
      render: function() {
            var {checked, ...other} = this.props;
            var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
            return (
              <div className={fancyClass} {...other}>
                {this.props.children}
              </div>
            );
      }
});
React.render(
     <FancyCheckbox checked={true} name="myname" onClick={console.log.bind(console)}>
            Hello world!
     </FancyCheckbox>,
     document.getElementById('example')
);

这里的...other会包含checked属性外的其他（name, onClick）属性 2. this.props.children用来获取标签内的所有子节点 3. propTypes对象用来验证组件实例的属性，如：

var MyTitle = React.createClass({
      propTypes: {
             title: React.PropTypes.string.isRequired,
      },
      render: function() {
            return <h1>{this.props.title}</h1>;
      }
})

这里验证title属性的值必须存在，且必须是字符串，否则在控制台给出警告！

getDefaultProps方法用来设置组件属性的默认值:

var Mytitle = React.createClass({
      getDefaultProps : function() {
          return {
               title : 'hello world'
          };
      },
  
      render: function() {
           return <h1>{this.props.title}</h1>;
       }
})
  
ReactDOM.render(
      <Mytitle title="haha" />,
      document.getElementById('example')
)

ref用来获取真实的DOM：

var MyForm = React.createClass({
      myClick: function() {
           this.refs.myInput.focus();
      },
      render: function() {
          return (
              <div>
                    <input type="text" ref="myInput" />
                    <input type="button" value="click" onClick={this.myClick} />
               </div>
           )
     }
})

this.state，用来改变组件的状态，以便和用户交流，getInitialState方法用于定义初始状态，返回一个对象！这个对象可以通过this.state属性读取！

var MyTest = React.createClass({
      getInitialState: function() {
           return {
                stated: true
           }
      },
      myClick: function() {
            this.setState({stated : !this.state.stated});
      },
      render: function() {
            var text = this.state.stated ? 'yes, I can!' : 'no, I can\'t';
            return (
                  <div>
                        <span>Can you speak English?</span>
                        <input type="button" value="回答" onClick={this.myClick} />
                        <div>{text}</div>
                   </div>
            )
      }
})
  
ReactDOM.render(
       <MyTest />,
       document.getElementById('example')
)

（由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。）表单的值需要通过this.state+onchange获取操作：

var MyForm = React.createClass({
      getInitialState: function() {
            return {
                  value: ''
            }
      },
      myChange: function(e) {
              var value = e.target.value,
                    value = /^\d*$/.test(value) ? value : '';
               this.setState({value: value});
      },
      render: function() {
             var value = this.state.value;
             return (
                   <div>
                        <input type="text" value={value} onChange={this.myChange} />
                        请填写电话号码！
                        <div>{value}</div>
                    </div>
            )
      }
})

二.组件的生命周期

组件的生命周期分为三个状态：

Mounting: 已插入真实DOM
Updating: 正在被重新渲染
Unmounting: 已移除真实DOM

React为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共有五种处理函数：

componentWillMount()
componenrDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object nextProps, object nextState)
componentWillUnmount()

此外,React还提供两种特殊状态处理函数：

componentWillReceiveProps(object nextProps): 已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState): 组件判断是否重新渲染时调用

组件style属性的设置方式需要写成style={{display: this.state.display}}

转载说明

本文允许全文转载，转载请注明来源：平凡公子 - React入门笔记

React入门笔记

说明 ​

语法说明 ​

数组 ​

二.组件的生命周期 ​

转载说明 ​

说明

语法说明

数组

二.组件的生命周期

转载说明