react 的入坑第二天（新手勿进，讨论向）

　　自学ｒｅａｃｔ框架一周左右了，从网上的建议脚手架搭建，到小项目独立调试ｂｕｇ感觉恍若隔世。ｒｅａｃｔ里的ｒｅｄｎｅｒ里面的ｈｔｍｌ部分其本质是JS对象。当需要渲染展示的时候，JS对象被转换成JSX结构。最后变成HTML标签。这种对虚拟ｄｏｍ操作的技术，我也曾妄想做出一个，组长给我评了６０－７０分。我当时考虑从ｊｓｘ对象结构入手，但是组长告诉我，你必须要从生命周期看才更全面。
　　

  constructor () {
        super();
        this.state = {
            Domments: []
        }
    }
render() {
        return (
            <div className='wrapper'>
                <DInput onSubmit={this.handleSubmitFromInput.bind(this)} />
               ／／把父组件的函数ｐｒｏｐｓ给子组件。
                <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
        })
    }

而这个可爱的　ｒｅｎｄｅｒ其实就是个函数，里面的对象当然要ｒｅｔｕｒｎ出来哦。函数方法放在ｒｅｎｄｅｒ渲染之外。
　　他的拥有很多需要引入的东西，同时，你的每个类，每个组建在引入前都需要输出　

export default DApp

　　但是引入就像阿岳老师一样，真的很严格。当你有一个组件，被引用，他就必须有内容，就必须有内容，否则会在你这个组件被使用时报错，报的还是你这个组件未引用，贼气。更难受的是，如果此时，你这个空组件，被嵌套在安静的角落时，你无法寻觅其踪迹，你就。。。你就。。。你就应该变得佛系了。
　　这里最让我着迷的是ｐｒｏｐｓ传值和改变ｓｔａｔｅ里定义的值来重新渲染页面。当遵循状态置顶这一原则时，你会看到，所有的组件，在父组件之下，如金字塔一般缓缓褪去神秘的面纱，值被一次又一次交给那可　ｋｅｙ，一次又一次被回调函数拉动塞到父组件的变量里。他是如此的残酷，不平等的交互，但有时又如此的美丽。
　　令人惊奇的是，ｐｒｏｐｓ竟然可以传递参数（有什么稀奇的），

{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！打卡下班！

react 的入坑第二天（新手勿进，讨论向）

猜你喜欢