自学react框架一周左右了,从网上的建议脚手架搭建,到小项目独立调试bug感觉恍若隔世。react里的redner里面的html部分其本质是JS对象。当需要渲染展示的时候,JS对象被转换成JSX结构。最后变成HTML标签。这种对虚拟dom操作的技术,我也曾妄想做出一个,组长给我评了60-70分。我当时考虑从jsx对象结构入手,但是组长告诉我,你必须要从生命周期看才更全面。
constructor () {
super();
this.state = {
Domments: []
}
}
render() {
return (
<div className='wrapper'>
<DInput onSubmit={this.handleSubmitFromInput.bind(this)} />
//把父组件的函数props给子组件。
<DList Domm={this.state.Domments}/>
</div>
)
}
handleSubmitFromInput (Domment) {
if (!Domment) return;
if (!Domment.username) return alert('请输入用户名');
if (!Domment.content) return alert('请输入评论内容');
//this.state.Domments.push(Domment);
//this.setState({
// Domments: this.state.comments
//})
this.state.Domments.push(Domment);
this.setState({
Domments:this.state.Domments
})
}
而这个可爱的 render其实就是个函数,里面的对象当然要return出来哦。函数方法放在render渲染之外。
他的拥有很多需要引入的东西,同时,你的每个类,每个组建在引入前都需要输出
export default DApp
但是引入就像阿岳老师一样,真的很严格。当你有一个组件,被引用,他就必须有内容,就必须有内容,否则会在你这个组件被使用时报错,报的还是你这个组件未引用,贼气。更难受的是,如果此时,你这个空组件,被嵌套在安静的角落时,你无法寻觅其踪迹,你就。。。你就。。。你就应该变得佛系了。
这里最让我着迷的是props传值和改变state里定义的值来重新渲染页面。当遵循状态置顶这一原则时,你会看到,所有的组件,在父组件之下,如金字塔一般缓缓褪去神秘的面纱,值被一次又一次交给那可 key,一次又一次被回调函数拉动塞到父组件的变量里。他是如此的残酷,不平等的交互,但有时又如此的美丽。
令人惊奇的是,props竟然可以传递参数(有什么稀奇的),
{Com.map((ee)=><Dom ee={ee}/>)}
这一次,我的调整,本着组件模块化的思想,在渲染一个数组数据时,我把被渲染的jsx对象,放在另一个组组件里,在这里引入后传递这个参数,就好像我们隔空用思想交流,我的指针,我的方法,我的数组,他就像未曾谋面的同胞兄弟,那样完美的默契,与我一起完成这段代码。
<input type="text" value={this.state.username} />
搞了半天,万事大吉,突然发现我竟然不能再input里输入文字,不过,回想一下这玩意的生命周期,在渲染一下state里的数据就可以
constructor(){
super();
this.state={
username:"",
content:""
}
}
<input type="text" value={this.state.username}
onChange={this.handleUserNameChange.bind(this)}
/>
handleUserNameChange(e){
this.setState({username:e.target.value})
}
如此一来,这些东西就完成了留言框的任务啦!nice!打卡下班!