React入门2（个人学习笔记）

前端请求

JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。在本文中，我们将介绍一些在JavaScript中发出HTTP请求的流行方法。

Axios

首先在项目中打开dos窗口：

C:\workspace\react-demo> npm install axios --save

其次：

import React from 'react';
import axios from 'axios';

class Axios extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			list: []
		}
	}

	getDate = () => {
		//通过axios获取服务器数据(此服务器允许跨域)
		var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
		axios.get(api)
			.then((response) => {
				console.log(response.data.result);//随具体内容变化
				this.setState({
					list: response.data.result
				})
			})
			.catch(function(error) {
				console.log(error);
			});
	}

	render() {
		return (
			<div>
			<h3>Axios</h3>
			<button onClick={this.getDate}>确认</button>
			</div>
		)
	}
}

export default Axios;

---

生命周期函数

在以下情形触发的一系列方法，叫做组件的生命周期函数：

1.组件加载之前；
2.组件加载完成；
3.组件更新数据；
4.组件销毁；

以下方法按加载顺序排序

组件加载时触发：constructor, componentWillMount, render, componentDidMount；(mount: 挂载)
组件更新时触发：shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate；
组件销毁时触发：componentWillUnmount；
在父组件里改变props传值时触发：componentWillReceiveProps；

constructor 和 render 不是组件生命周期函数；
componentDidMount较为常用：它在组件第一次渲染完成后自动调用；
componentWillUnmount：
触发的典型场景：数据更新，页面重新渲染时，导致组件被取消挂起

shouldComponentUpdate(){
	return true;//必须返回一个boolean
}
//当且仅当返回true, 才会执行更新

---

React-router

可以让根组件动态地挂载不同的组件；根据用户访问的地址，动态地加载不同的组件

1. 首先在项目中打开dos窗口

C:\workspace\react-router> npm install react-router-dom --save

2. 以 在App.js中配置 router 为例
   2.1 引入react-router-dom；
   2.2 配置Link(跳转链接)；（点击跳转）
   2.3 配置Route(路径)；（相当于监听器?）

App.js

import React from 'react';
import './App.css';
import Home from './Home';
import News from './News';
import Product from './Product';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <header className='header'>
          <Link to='/'>首页</Link>
          <Link to='/news'>新闻</Link>
          <Link to='/product'>商品</Link>
        </header>
        <Route path="/" exact component={Home} />
        <Route path="/news" component={News} />
        <Route path='/product' component={Product}>
       </Route>
      </div>
    </Router>
  );
}
export default App;

注意：

<Router> </Router>中只允许存在一个子元素，如果存在多个会报错
exact关键字：匹配path='/news'的路由会默认匹配path='/'的路由，
exact表示"精确匹配"，有了它，模块才能独立渲染

router跳转页面的时候，需要向动态生成的子组件传值

1. get传值
2. 动态路由
3. Localstorage

App.js

import React from 'react';
import Content from './Content';

import {Route} from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
      	{/*get传值*/}
      	<Route path='/news/content' component={Content} />
      	
      	{/*动态路由传值*/}
        <Route path='/news/content/:aid' component={Content} />
      </div>
    </Router>
  );
}

News.js

import React from 'react';
import {Link} from 'react-router-dom';

class News extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			list: [{aid: '1',title: '新闻1'}, {aid: '2',title: '新闻2'}, {aid: '3',title: '新闻3'}]
		}
	}
......
	{this.state.list.map((value,key)=>{
		return (<li key={key}>
			{/*get传值*/}
			<Link to={'/news/content?aid='+value.aid}>{value.title}</Link>
			
			{/*动态路由传值;下面是ES6的模板字符串,
			用`（反引号）标识，用${}将变量括起来*/}
			<Link to={`/news/content/${value.aid}`}>{value.title}</Link>
		</li>)
	})}

Content.js

需要在项目中安装url模块

import url from 'url';

componentDidMount() {//生命周期函数
	//获取动态路由的传值
	console.log(this.props.match.params.aid);
	//get方法传值
	console.log(url.parse(this.props.location.search, true).query.aid);
}