React+Redux项目实战——简书2

1.什么是路由，如何在React中使用路由功能

根据URL的不同显示不同内容。

2.在home首页中各部分组件初次加载时所用到的数据，统一在home首页index.js中用ajax获取。

3.home下的index.js里面的Home组件是一个UI组件（只有render），应该将其他逻辑操作放到他处（比如，ajax请求）。

4.home下的每个子组件几乎都用connect与store进行了连接，那么只要store中的数据发生改变，则每一个组件都会被重新渲染（而有些是不需要的）。可以使用shouldComponent来规定是否需要渲染，但是在每个组件内都写shouldComponent太麻烦了，所以react中内置底层实现了shouldComponent功能，通过使用PureComponent来创建所有组件即可。

由于此项目中使用immutable.js来管理数据格式，所以使用PureComponent创建组件没有问题，但是如果没有使用immutable，使用PureComponent可能会有问题（即immutable+PureComponent结合使用）。

5.单页应用——路由跳转

页面跳转的时候，用a标签时：会再请求一个HTML文件，不是单页应用，会耗性能。

使用react-router-dom第三方模块：单页应用的跳转。（使用<Link>）

单页应用：无论怎么做页面的跳转，整个网站只会加载一个HTML文件（只会加载一次HTML文件），减少HTML页面的请求，提升性能。

You should not use <Link> outside a <Router>！！！（即所有使用react-router-dom插件下的组件，如<Link>，都需要包裹在<Router>内，比如<BrowserRouter>）

6.从后端获取首页articleList数据时，应该告知后端本次点击想要获取相应页码page中的数据。所以在进行ajax数据请求时，应该把该次点击想要获取的页码page发送给后端；获得数据后，将store中page页码数加1。

7.如何给"返回顶部"加过渡效果？？？

8.如何在不同页面间进行路由跳转时传递参数，实现跳转到指定页面？

方法一：动态路由

思路：从首页的ListItem跳转到详情页面中，路由的同时传递唯一的参数id，跳转到的详情页面初始化进行ajax请求时，将路由传来的参数id发送给后端，后端根据参数id返回相应的网页内容。

{/*设置页面组件的路由地址*/}
{/*访问/detail路径下的页面时，还要传递额外的参数id，则路径为/detail/1也可以跳转到Detail页面*/}
<Route path={'/detail/:id'} exact component={Detail}></Route>


//进行路由跳转页面时，传递参数id
<Link to={'/detail/' + item.get('id')}>


//跳转到的详情页面初始化进行ajax请求时，将路由传来的参数发送给后端，后端根据参数id返回相应的网页
export const getDetail = (id) => {
    return (dispatch)=>{
        axios.get('/api/detail.json?id=' + id).then((res)=>{
            dispatch(changeDetail(res.data.data));
        })
    }
};

方法二：思路与方法一一样，只不过路由传递参数的方式不同。

<Route path={'/detail'} exact component={Detail}></Route>  {/*方法二: */}


<Link to={'/detail?id=' + item.get('id')}>  {/*方法二: */}


export const getDetail = (id) => {
    return (dispatch)=>{
        axios.get('/api/detail.json?id=' + id).then((res)=>{
            dispatch(changeDetail(res.data.data));
        })
    }
};

9.页面跳转——实现思路（home页面中的ListItem ——>跳转到 详情页面----Detail组件）

（1）设置 详情页面（Detail组件）与 路由地址（localhost:3000/detail） 的跳转关联；

（2）在ListItem中 设置 路由跳转<Link to={ '/detail' }>，跳转到详情页面。

10.整个网站的各总页面布局

Header组件（导航条）：每页都显示，所以不设置路由地址；

Home首页、Login登录页、Detail详情页：都属于不同的页面，分别设置不同的路由地址。

<BrowserRouter>
    <div>
        <Header/>  {/*Header组件没有设置路由地址，所以所有页面上都会显示*/}
        <Route path={'/'} exact component={Home}></Route> {/*设置页面组件的路由地址*/}
        <Route path={'/login'} exact component={Login}></Route>
        <Route path={'/detail/:id'} exact component={Detail}></Route> 
    </div>
/BrowserRouter>

11.获取DOM元素

js中获取DOM节点----ref；仍使用它

styled-component插件提供 innerRef 获取DOM元素。但React16中已将innerRef删除，故仍然使用ref。

（实现登录功能的时候，需要进行账号密码的校验，所以需要将账号密码发送到服务端，用innerRef获得DOM中的value，即账号密码，将获得的账号密码发送至服务端。）

12.改变哪个组件的reducer中的数据，就要在该组件的actionCreators里创建action，并派发。若要在其他组件中（Header）改变Login组件中的reducer数据时，在Header组件中调用Login组件中的actionCreators，并在其中创建action。

13.mapState中的变量名 与 mapDispatch中的方法名 不能重名。

14.重定向Redirect（from 'react-router-dom'）：重新跳转到xxx页面。

15.异步组件及withRouter路由方法的使用

1.需求：在加载网站时，进入哪个页面就加载哪个，不提前加载其他网页（比如，进入简书首页时，只加载首页的内容，进入详情页时，再加载详情页内容。）

2.实现：异步加载，第三方模块 react-loadable；

当通过App.js中的路由地址进入详情页时，首先进入loadable.js，即异步Detail组件，再通过下面的loader加载正常的Detail组件。

其中使用异步组件后，如果在原Detail组件中接收路由参数时，需要使用withRouter，使得原Detail组件可以获取路由中所有参数。因为使用了异步组件后，App.js中的路由地址指向的是loadable.js异步组件，所以在原Detail组件中获取不到路由传递来的参数，需要使用withRouter。