React的学习（下）

摘要

众所周知，前端三大框架Angular、React、Vue，所以为了跟上时代的步伐，最近开始着手学习React，这时候就发现个大问题，框架一直在更新，提倡的编写语法也在更新，网上有许多教程都是一两年前的了，因此，我决定直接从官方英文文档入手学习，学习的框架版本为最新的ReactV15.5.0，现将学习笔记整理如下，以供大家参考，本篇文章主要是react一些基础语法的讲解与总结，如需深入了解，可查阅官方文档，也敬请期待后续文章。

本文接着上篇文章继续讲解React的基础语法

5、表单

文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。

如果你希望React指定初始值，但不再控制后续更新。要处理这种情况，可以指定一个defaultValue属性而不是value。

 <input type="checkbox">和<input type="radio">支持defaultChecked，<select>与<textarea>支持defaultValue。

6、组件生命周期

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

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

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

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

7、AJAX

React并没有像Angular一样一手包办，连http服务都帮我们封装好了，因为它提倡的是以React为核心，同时你可以使用其他的库，增加代码的灵活性，而不是一手包办，所以React是个轻量的库。

组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI 。

8、样式的设置

1）设置class

因为class是ES6语法里的关键字，所以在React里使用class时，应该改为className,例如

<div className="style1"></div>

2）使用行内样式

style的值是对象，所以如下：

let backAndTextColor = {
    backgroundColor:'red',
    color:'white',
    fontSize:40
};
<div style={backAndTextColor}>看背景颜色和文字颜色</div>
//或者，注意是双括号哦，第一层是{}是JSX语法，第二层{}代表是对象，是不是一目了然了
<div style={{backgroundColor:'red',color:'white',fontSize:40}}>看背景颜色和文字颜色</div>  

9、操作组件内节点

通过设置标签的ref属性，然后用this.refs['前面的ref名']访问

可以拿到原生的节点后，这时就可以使用其他方法比如jQuery操作原生的节点【题外话：通过$()[0],可以从jQuery对象中拿到原生对象】

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

通过这个ref我们同样可以获取input的输入值。就是这么简单。

但是使用过程中我们切记：由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

10、一个简单的demo

接下来展示一个简单的demo，实现网页时钟显示

class Timer extends React.Component{
  constructor(props) {
    super(props);
    this.state = {h:0,m:0,s:0};

  } 

  tick(){
    var now_date=new Date();
    this.setState({
    h:now_date.getHours(),
    m:now_date.getMinutes(),
    s:now_date.getSeconds()
    });
  }
  componentDidMount(){
    var _this=this;
    setInterval(function(){
    _this.tick();
     },1000);
    this.tick();  //组件刚挂载时执行tick()，可以避免出现0:0:0
  }

  render(){
    return (
      <div>
    <span>{this.state.h}:</span>
    <span>{this.state.m}:</span>
    <span>{this.state.s}</span>
    </div>
    );
  }
}

ReactDOM.render(
  <Timer />,
 document.getElementById('root')
);

更多前端技术文章，欢迎访问我的个人技术博客：嵘么么的个人博客