现在有个需求要实现导航点击不同页面创建一个div将页面的内容保存起来，点击其他的时候把当前的div隐藏，这样打开过的再次点击回来的时候就不需要再次加载，这个需求使用jq非常容易，但是在使用react的时候不是很有思路，求大神指点一下，另外问题2：能不能使用路由？感觉不能用呢，比如说3个按钮，每个按钮对应/baidu，/taobao，/jingdong三个路由，每个按钮点击一遍之后我就把所有的数据存到store里面（项目使用redux），我要先点了/baidu，然后进淘宝的时候是不是要把/baidu里面的所有东西再从store里面遍历到一个div里，然后让这个div隐藏？我要是有十几个按钮，那么隐藏那么多是不是有问题啊
React如何向jq一样粗暴的增加dom
lobos
#4
很多场景不需要redux，尤其是刚接触React的新手，老老实实用state就好了，Simple is better。
刚接触React，最需要解决的问题，就是思维方式要改变，为什么要用div来存储数据？完全不需要的，要做的就是两点，改变数据，根据数据render。
class Example extends Component {
constructor (props) {
super(props)
this.state = {
data: {},
current: 'baidu'
}
}
handleChange (current) {
// set state.data[current] = 当前页面数据
// set state.current = current
}
render () {
const { current, data } = this.state
return (
<div>
<button onClick={this.handleChange.bind(this, 'baidu')}>baidu</button>
<button onClick={this.handleChange.bind(this, 'taobao')}>taobao</button>
<button onClick={this.handleChange.bind(this, 'jingdong')}>jingdong</button>
<div>{/* 从 data[current] 里面获取数据渲染 */}</div>
</div>
)
}
}
1 Like
BenAnn
#5
首先谢谢你的回答，我这边还是有一点疑问，首先按钮不止这三个，并且每个渲染的东西一定是不一样的，并且非常多的，所以我想知道你说的
{/* 从 data[current] 里面获取数据渲染 */}
里面是不是放着所有路由的东西（/baidu,/taobao,/jingdong,/…），因为这样才能把数据装到对应路由里去，我可能表达的不是很清楚，比如/taobao里面就需要id和name，然后点了button之后，div里面显示一堆组件，然后有地方显示id和name，但是/baidu里面需要的是age和time，然后点了button之后/taobao就不显示了，显示另外一堆组件，里面有地方显示了age和time，我现在的需求是不想点了/taobao的button后再加载一遍页面，想让加载了一遍的东西进行保存
lobos
#6
class Example extends Component {
constructor (props) {
super(props)
this.state = {
data: {
baidu: ['age', 'time'],
taobao: ['name', 'id'],
...
},
current: 'baidu'
}
}
handleChange (current) {
this.setState({ current })
}
render () {
const { current, data } = this.state
const items = data[current]
return (
<div>
{ Object.keys(data).map(k => <button onClick={this.handleChange.bind(this, k)}>{k}</button>) }
<div>
{ items.indexOf('age') >= 0 && <Age ..../> }
{ items.indexOf('time') >= 0 && <Time .../> }
....
</div>
</div>
)
}
}
1 Like
lobos
#8
大家都是从业余过来的，没必要这样说。
楼主的态度很好的，只是很多观念还没有从操作dom转过来。
我觉得现在React社区的风气不太好，不管什么项目，不管大小，上来就是全家桶，Redux，Rx，mobx什么的一起上，好像不用就不是在用React。
BenAnn
#9
会者不难，难者不会
我不会，我百度了，没有找到我要的答案，然后我来问，希望有大神指点一点，然后我自己做去，你这种没有任何价值的回复是要和我扯皮？你16年6月也问过react-router的问题，那我如果当时看到，是不是应该回复“没搞清楚react-router原理何必上react-router，这种问题吻得太业余”？ 谁不是一点一点学过来的？你给我指点一点我谢谢你，我就是来学东西的怎么了
chenshaoping1021
#10
刚开始我也以为一个类似tab的东西搞定，最后看看这个更像需要一个路由来管理， 那现在我感觉问题应该是 切换不同的路由，却不重新加载数据， 是不是可以 先加载数据，让数据存储到redux 的 store， 然后切换不同路由的时候，先进行判断， 看情况是否需要加载
Caballarii
#11
OKOK，我道歉，我就看react里用jquery不爽，所以喜欢阴阳怪气。
另外我也很同意lobos，直接上redux有时候就忽略了react基于state的那套基本功了，state玩熟就不会怀念jQuery了。
祝你成功
BenAnn
#12
你的思路就是我最开始的想法，不是很想放弃router，不理解的地方就是点击路由跳转之后进入另一个页面，另一个页面没有上一个页面的所以组件，这样就对我造成了困扰，是进入下一个路由的时候把所以的上一个路由的组件再往里面加，还是每一个路由里面有所以路由的组件，通过state判断要显示哪个，但是这样一想貌似又不需要路由了，你写一个大的组件，里面所有的都存在了，你也不需要路由跳转啊
lobos
#13
切换路由也可以一样的处理，路由只是把 state.current 变为 params.current 而已，存不存到store，我的观点是，如果这个数据还有其它的组件用到，就放到store去，如果没有，还是放在state里，就近管理。
const { url, params } = this.props.match
const { data } = this.state
const {current} = params
return (
<View data={data[current]} />
)
someok
#14
其实这个问题很典型的，我最近就遇到一个类似的问题，就是某颗很大的树，点击某个分支的时候只显示此分支及子节点，再次点击面包屑的根节点的时候重新渲染这棵树时候速度很慢，而且这个问题按照 react 的思路是无法优化的。
所以想到一个 hack 思路就是如楼主这样，分成两个 div，点击子节点的时候就把那个大树隐藏起来。
楼主这个问题其实很好，很多人没有遇到这个场景可能就会觉得 redux 的 store 处理就 ok 了，但是其实性能瓶颈是 dom 树的重新生成，尤其数据量大的时候
