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, 2, 4, 5, 6, 7, 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, 2, 4, 5, 6, 7, 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, index),
newValue,
...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>
)
}
-----------
也能够在函数中运用Location.href.push(“/detail”)举行跳转;