【学】React的学习之旅7-官方例子总结

• 如果在标签里有注释，除了使用/**/之外，如果写在子标签中，外面还需要用{}包起来，指明这段是javascript代码，否则这段注释会直接显示在页面上，例如

render:function (){
    return (
        <div>
            <h1>Comment Box!!!</h1>
            <CommentList comments={this.state.comments} />
           
            {/*这里的绑定非常重要，相当于commentList的属性props中的comments与它的父级commentBox的状态state的comments一直是关联的，CommentList中的数据从属性中读取数据时，相当于从commentBox的状态读取数据*/}
            
            <CommentForm onSubmit={(ev,comment) => {this.addComments(ev,comment);}}/>
        </div>
    );
}

• 当提交数据与后端交互时，这里的思路是，或者说react灵活的地方在于，它不需要等ajax请求后，等服务器响应数据回来后再添加，如果和后端配合好，可以在用户点击后，直接将要添加的comment写到客户端的页面上，而假设3秒后后端的数据顺利过来时，这段数据是已经和在前端中写入页面的数据是一致的，而react的机制是，当发现数据一致时，是不会再重新刷新页面的。另外，如果ajax请求失败，则需要把添加到页面的数据再删除即可。
• 某个中间组件的生成时的数据绑定非常重要，比如<CommentList comments={this.state.comments} />，CommentList是个中间组件，它父级有<CommentBox />，下面子级<Comment />，相当于commentList的属性props中的comments与它的父级commentBox的状态state的comments一直是关联的，CommentList中的数据从属性中读取数据时，相当于从父级commentBox的状态读取数据*/}