React基础二

1. React 调用API --> react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据

1). axios -->https://www.npmjs.com/package/axios / https://github.com/axios/axios  -->axios的作者觉得jsonp不太友好，推荐用CORS方式更为干净（后端运行跨域）

　　安装:  $ npm install axios --save / $ yarn add axios --save  --> --save 写入配置文件

　　引用: import axios from 'axios'

2). Fetch Jsonp -->https://www.npmjs.com/package/fetch-jsonp

　　安装: npm install fetch-jsonp --save

　　引用: import fetchjsonp from 'fetch-jsonp';

2.. 生命周期函数

　　1).组件加载触发的生命周期函数:

　　　　constructor .componentWillMount --> 组件将要挂载. render-->数据渲染 .componentDidMount --> 组件加载完成(dom操作只能在这之后)

　　2).组件数据更新触发的生命周期函数:

　　　　shouldComponentUpdate --> 组件数据更新时触发,(返回true/false,判断是否重新渲染, 默认true. https://reactjs.org/docs/react-component.html#shouldcomponentupdate --> (netxProps(父组件传过来的值),netState(改变后的值)))

　　　　.componentWillUpdate --> 将要更新时触发. render.componentDidUpdate -->组件更新完成时触发

　　3).父组件里面改变props传值时触发的生命周期函数:

　　　　componentWillReceiveProps

　　4):组件销毁时触发的生命周期函数:

　　　　componentWillUnmount 

 

3. react - router --> 让根组件动态的挂载不同的组件 -->https://reacttraining.com/react-router/web/guides/quick-start

　　npm install react-router-dom --save

　　在安装react-router 的时候遇到 run `npm audit fix` to fix them, or `npm audit` for details 的错误

　　解决办法: npm audit fix --> 检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖，不再自己进行跟踪和修复 执行完成后,再次install . 

　　import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";

　　结构: --> exact 严格匹配组件

            <Router>

                <div>

                    <Switch>

                        <Route path="/News">

                            <News/>

                        </Route>

                    </Switch>

                </div>

            </Router>

4). 页面传值:

　　1).get传值　　　　

<Link to={`/Content/?id=${item.titileID}`}>{item.titile}</Link>

　　　　解析url中的参数, 使用了url模块 -->https://www.npmjs.com/package/url

　　　　安装: npm install url --save

　　　　解析:{url.parse(this.props.location.search, true).query.id} --> parse后query转换成对象

　　2).动态路由

　　　　注意两点:

　　　　　　路由表: <Route path='/Content/:id' component={Content} />

　　　　　　Content组件: this.props.match.params.id  

　　　　在componentDidMount中打印 this.props 
　　　　match : 具体的url中的信息, params url中的参数值