来自分类 React2025-01-16 10:27:34
一开始的思路是在列表页面, 利用`useEffect`钩子监听location, 在清除函数里获取滚动条的高度, 可惜获取时机好像不对, 一直获取的高度都是0, 通过打印`body`的`innterHTML`发现, 这时候路由已经开始渲染详情页了
然后开始尝试使用`addEventListener`监听`scroll`, 代码如下:
```ts
export function useSaveScroll(key: string) {
const location = useLocation()
const pathname = location.pathname
useEffect(() => {
const handleScroll = () => {
ls.set(`scroll_path_${pathname}`, window.scrollY)
}
const scrollY = ls.get(`scroll_path_${pathname}`) || 0
wi...
来自分类 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 ...
