来自分类 React2024-01-19 22:32:19
需求: 1、需要路由切换动画, 2、从详情页返回列表页时, 需要滚动到历史位置
咋一看, 这不挺简单的吗?
使用`redux`做数据的临时存储, 在`componentWillUnmount`钩子里, 读取滚动条位置, 然后保存到本地存储
当从详情页或者其他页面返回列表页时, 判断`redux`里是否有数据, 如果有数据直接读取, 不再发起请求, 在`componentDidMount`钩子里读取本地存储的滚动条位置, 然后滚动到相应位置不就行了吗
上面的思路在没有路由动画时, 是可行的, 但是有路由动画的话, 就不行了, 你会发现在`componentWillUnmount`钩子里取到的滚动条位置, 总是不对的
主要原因是, 为了用户体验, 在详情页需要`componentDidMount`钩子里将滚动条设置为0, 不然在进入详情页时, 滚动条位置会不在顶部
再加上, 添加了路由动画后, 从列表页进入详情页, 有一小段时间, 列表页和详情页这两个组件会同时存在, 而且两个页面钩子的执行顺序为: 详情页的`componentDidMount` => 列表页的`compone...
来自分类 React2016-12-07 23:12:00
# 正常打包
```javascript
import IndexPage from './views/app.jsx'
import AboutPage from './views/about.jsx'
export default function({history}) {
return (
<Router history={history}>
<Route path="/" component={IndexPage} />
<Route path="/about" component={AboutPage} />
</Router>
)
}
```
这是一个正常打包的路由写法, 如果需要分割代码, 我们需要改造下路由, 借助`getComponent`和`require.ensure`
# webpack 代码分割
```javascript
export default function({history}) {
return (
<Router histor...
来自分类 React2016-12-07 22:12:00
# Vue-Router
```html
// vue1
<a v-link="{ path: '/', activeClass: 'custom-active-class' }"></a>
// vue2
<router-link to="home" active-class="custom-active-class">Home</router-link>
```
但是这里有一个小问题, 如果该链接是根路由, 那么访问任何路由, 根路由都会被添加`custom-active-class`, 怎么解决呢?
只要添加`exact: true`即可, 这样就要求地址要完整匹配, 才会添加`ActiveClass`
# React-Router
```javascript
import {Link} from 'react-router'
// ...
<Link activeClassName="v-link-active" to="/">
```
`React-Router` 一样会有`Vue-Router`的问题, 不过也有解决方法, 我们需要用到`IndexLink`
```jav...
来自分类 React2016-12-07 22:12:00
对于用习惯了Vue的双向绑定后, 对React的双向绑定, 真心觉得蛋疼...
Vue的双向绑定, 只需要在data中初始化, 然后用v-model绑定即可, 简单省事...
再来看看React的:
```javascript
var NoLink = React.createClass({
getInitialState: function() {
return {
message1: 'Hello!',
message2: 'Hello!'
};
},
handleChange1: function(event) {
this.setState({message1: event.target.value});
},
handleChange2: function(event) {
this.setState({message2: event.target.value});
},
render: function() {
var message1 = this.state.message1,
message2 ...
