react跳转到网络异常页面_React实例项目1

本章主要内容有基本搜索功能、搜索页面及路由、列表组件、滚动加载更多、再次搜索功能和搜索历史。

第一节 基本搜索功能，搜索页面及路由

1.基本搜索功能

1.提取input标签作为公共组件

SearchInput.jsx:
<input
   type="text"
   value={this.state.searchValue}
   className="search-input"
   placeholder="请输入搜索内容"
   onKeyUp={this.keyUpHandler}
   onChange={this.inputChangeHandler.bind(this)}
/>

2.监听鼠标抬起事件，判断用户按下回车键时路由跳转并携带数据

keyUpHandler = (event) => {
   if (event.keyCode === 13) {
       // 跳转到search页面
       this.props.history.push("/search/" + this.state.searchValue)
   }
}

注意：当前组件不是路由关联的页面，所以不能直接获取到路由的history对象，可以通过withRouter处理

import { withRouter } from "react-router "
Exprot default class SearchInput extends React.Component{
}
export default withRouter(SearchInput)

2.搜索页面及路由

1.创建搜索页面

页面分头部和列表部分，分别使用组件形式引入

2.配置路由

需要配置路由参数，因为页面跳转时会携带不同的搜索关键字

{/* 路由参数后面的问号：作用是用户传递或者不传递，都要匹配路由 */}

<Route path='/search/:skeyword?' component={Search} />

本节作业：

实现按回车键跳转到搜索页面，并把搜索关键字传到搜索页面

第二节 头部组件、列表组件

1.头部组件

由返回图标和搜索框组成。搜索框使用公共的SearchInput组件

2.列表组件

在列表组件中获取数据，然后遍历数据生成页面结构，结构中的每个元素项使用公共的Item组件展示。

请求网络数据：

本节作业：

1.完成search页面效果

第三节 滚动加载更多

1.创建加载更多组件loadMore

创建ref，获取DOM元素

2.绑定滚动事件

getBoundingClientRect().top 获取元素距离可视窗口顶部的距离

防止onscroll事件多次触发，使用节流方案

3.触发父级组件中的网络请求

请求数据功能封装成函数，方便调用；因为是加载更多，所有请求到数据后要和原数据进行拼接

4.组件销毁前把事件取消掉

组件被销毁后，如果还有 事件、定时器、setState、网络请求等异步操作，react程序就会报错

所以在组件销毁前，必须把事件解除绑定，把定时器关闭，把setState清理了

componentWillUnmount() {
window.onscroll = null;
this.state=(state,callback)=>{
  return
}
}

本节作业

实现滚动加载更多

第五节 再次搜索功能，搜索历史

1.再次搜索功能：

再次搜索时触发的是search页面的更新功能，所以再次搜索只需要在生命周期函数componentDidUpdate中就可以实现

特别注意：在componentDidUpdate中调用setState方法后会触发组件的更新，componentDidUpdate生命周期函数会再次执行，会形成死循环，所以需要使用prevProps属性判断组件是否有更新

2.搜索历史

1.使用redux存储搜索关键字

2.页面更新后再次更新redux中的搜索关键字

3.SearchInput组件中显示当前页面搜索关键字

创建reducer

export default  function searchReducer(state={kw:''},action){
    switch(action.type){
        case "CHANGEKW":
            state.kw = action.data
            return {...state}
        default:
            return state
    }
}

创建actions

export function ChangeKW(keyword){
    return{
        type:'CHANGEKW',
        data:keyword
    }
}

关联search组件

本节作业：

1. 完成再次搜索功能，搜索历史