Issue1:
ajax引入数据,初始化data==null,设置ajax同步async=false可以获取数据,如何在ajax获取结束后render;
Response:
进行条件渲染:根据条件(State)的变化,初始化加载一种情况,数据加载完成后,改变条件(State),渲染另一种情况;
Issue2:
多个同级兄弟组件渲染,如果没有父级标签包裹(ReactJS要求必须有且仅有一个Root节点),如何处理?
Response
不用创建冗余的父级标签,创建一个函数return
这些同级组件,在render()函数中返回函数返回值即可;
示例代码:
this.state.data.loading条件判断解决Issue1;
this.renderBody()函数解决Issue2;
constructor() { super() // data: [1,2,4,5,6,7,9] this.state = { data: { loading: true } } } componentDidMount() { setTimeout(() => { this.setState({ data: { data: [1,9] } }) },3000); } clickHandler() { let index = 2,newValue = Date.now() % 9; this.setState({ data: { data: [ ...this.state.data.data.slice(0,index),newValue,...this.state.data.data.slice(index + 1) ] } }) this.state.data.data[index] = newValue; this.forceUpdate() } renderBody() { return ( <div> { _.map(this.state.data.data,(v,i) => <div key={i} style={{ color: v % 2 === 0 ? 'red' : 'green' }}>{v}</div>) } </div> ) } render() { return ( <div> { this.state.data.loading ? <Loading /> : this.renderBody() } </div> ) }
Issue3:
ES6如何实现按需加载?
Response
React不必需要按需加载,封装成组件,在不需要的时候根本就不会下载该组件和该组件的依赖;
Issue4:
React实现服务器端渲染?需要在服务器端(nodejs)运行js,使用renderToStaticMakeup()将组件返回字符串,前端如何获取并转成组件?
Response
React没有需求实现服务器端渲染,如果要求SEO,则可以后台脚本实现静态化,效率等各方面比React好很多;
Issue5:
数据从父组件一层层传下来,如何精准快速的查找到哪个组件定义的state;
Response
Flux或者Redux架构;
Issue6:
生命周期的使用情况;
Response
尽可能的不要使用生命周期,唯一常用的是componentDidMount();
Issue7:
Jest测试有必要么;
Response
Issue8:
this.state.property=val和setState()都可以改变state数据,它们有什么区别?
Response
使用this.state.property=val改变state数据,需要使用forceUpdate()
强制渲染,渲染时会销毁原有的State对象并创建新的(复制原对象并更新this.state.property的值),而不是对原有State对象的更改;
Issue9:
React初始化State对象时
this.state = { data: { data: [1,9],loading:true } }
通过:
this.setState({ data:{ loading:false } })
并不会重新渲染,ReactJS检测this.state.data的改变,即State对象顶层属性名的值的改变,这里改变的是this.state.data.loading的结果
Response
this.setState({ data: { data: [ ...this.state.data.data.slice(0,...this.state.data.data.slice(index + 1) ] } })
通过重新组装this.state.property对象并赋值,引发View的重新渲染;
Issue10:
React会把State状态更新操作放在一起,批量执行,是如何执行的?
不同生命周期的State状态更新是在渲染阶段一起,依次执行,还是在该生命周期方法结束后执行,每个生命周期都是独立的;
Response
首先,不推荐频繁的使用生命周期函数;
其次,在生命周期函数中调用this.setState()函数,ReactJS会将this.setState()加入队列中,优先执行完自定义的脚本后,执行State对象的更新;每个生命周期都是独立的;
注意:在componentWillMount()函数中调用this.setState()函数没有意义,这时没有进行渲染,还没有DOM节点,无法进行数据的更新——数据的更新需要在渲染完DOM后进行;
Issue11:
react-router怎么用;
Response
引入依赖: import { Router,Route,hashHistory } from 'react-router' Router的使用: render( <Router history={hashHistory}> <Route path="/" component={MainView} /> <Route path="/detail" component={Detail} /> </Router>,document.getElementById('container') ) ----------- 引入依赖: import { Link } from 'react-router' Router的使用: render() { return ( <div> <Link to="/detail">Detail</Link> <a href="#/detail">Detail2</a> </div> ) } -----------