来自分类 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 ...