React.js学习2——React 组件生命周期、React AJAX、React 表单与事件

素颜马尾好姑娘i 2022-05-13 13:52 132阅读 0赞

# 一、React 组件生命周期 #

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

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

其实根据这个概念就可以区分出生命周期的各个方法：

生命周期的方法有：

*  **componentWillMount** 在渲染前调用,在客户端也在服务端。
 *  **componentDidMount** : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
 *  **componentWillReceiveProps** 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
 *  **shouldComponentUpdate** 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。   
    可以在你确认不需要更新组件时使用。
 *  **componentWillUpdate**在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
 *  **componentDidUpdate** 在组件完成更新后立即调用。在初始化时不会被调用。
 *  **componentWillUnmount**在组件从 DOM 中移除之前立刻被调用。

官方文档：[https://reactjs.org/docs/react-component.html\#lifecycle-methods][https_reactjs.org_docs_react-component.html_lifecycle-methods]

# 二、React AJAX #

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。

以下实例演示了获取 Github 用户最新 gist 共享描述:

class UserGist extends React.Component \{  
  constructor(props) \{  
      super(props);  
      this.state = \{username: '', lastGistUrl: ''\};  
  \}  
  
  
  componentDidMount() \{  
    this.serverRequest = $.get(this.props.source, function (result) \{  
      var lastGist = result\[0\];  
      this.setState(\{  
        username: lastGist.owner.login,  
        lastGistUrl: lastGist.html\_url  
      \});  
    \}.bind(this));  
  \}  
  
  componentWillUnmount() \{  
    this.serverRequest.abort();  
  \}  
  
  render() \{  
    return (  
      <div>  
        \{this.state.username\} 用户最新的 Gist 共享地址：  
        <a href=\{this.state.lastGistUrl\}>\{this.state.lastGistUrl\}</a>  
      </div>  
    );  
  \}  
\}  
  
ReactDOM.render(  
  <UserGist source="https://api.github.com/users/octocat/gists" />,  
  document.getElementById('example')  
);

以上代码使用 jQuery 完成 Ajax 请求。

# 三、React 表单与事件 #

HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。

在 HTML 当中，像 <input>, <textarea>, 和 <select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

参考文献：[http://www.runoob.com/react/react-ajax.html][http_www.runoob.com_react_react-ajax.html]

[https_reactjs.org_docs_react-component.html_lifecycle-methods]: https://reactjs.org/docs/react-component.html#lifecycle-methods
[http_www.runoob.com_react_react-ajax.html]: http://www.runoob.com/react/react-ajax.html