React学习笔记之三(使用React写个简单的评论demo)

序:本篇文章主要介绍使用React来创建一个简单的评论demo,这里会使用JSX的语法来写,然后使用工具进行编译。

主要功能:1)读取所有评论  2)获取评论  3)实时更新  4)用户体验优化(在提交后台之前就展示用户发表的评论)

划分组件

使用Reactjs首先要对做的功能进行组件划分,组件结构如下:

 

获取评论

注意:原生的HTML元素以小写字母开始,自定义的React类以大写开始,并且即使是这里的div也不是真实的DOM里面的div,而是React里面的div组件的实例,可以理解为React知道怎么处理原生的HTML标签。这里的className就是class,只是class是关键字所以不能直接写成class。React是默认启用了XSS保护的,不用返回基础的HTML代码,而是创建的组件树结构。这样使得React是可以组合使用,也是创建可维护前端的关键原则。ReactDOM.render()实例化了一个根组件(第一个参数),并启动框架注入到普通的DOM元素中(第二个参数),ReactDOM公开了具体的DOM方法,React是核心的模块,可以被多个平台使用(React Native)。这也是我们引入了两个React相关的js,一个是核心框架,另外一个是针对DOM的具体接口开放。ReactDOM.render必须在所有组件定义完成以后进行调用。

可以编写边调试看看效果,执行npm run build,对jsx进行编译。编译的结果如下:

可以知道为什么推荐我们使用jsx来写js,结构和代码都要清晰简便很多,在嵌套结构里面就更为明显,但是为了不在浏览器端编译jsx,上线之前进行预编译。

 

完成剩下2个组件的代码框架如下:

并且对CommentBox进行修改:

进行jsx编译以后,普通的js会比jsx看起更为复杂,所以再次建议使用jsx来开发。

 

接着创建Comment组件,需要的数据以props的属性从父级传入,访问这些属性使用this.props

 

接下来模拟一些评论数据来展现,定义一个data变量来存放。

在CommentsList中遍历data并且嵌套Comment组件

接着把server.js服务启动,调用API接口来获取数据,url地址从根组件传入。每个组件根据props属性都可以进行一次呈现,props是不可变的,从父级传入,属于父级。为实现交互,React引入了state,state是组件私有的,通过调用this.setState()来改变。如果state变化了,组件会重新渲染。评论数据会变化,所以这里使用一个state来存放data,当data这个state变化时,组件重新渲染,展示最新的评论数据。

componentDidMount方法在组件第一次渲染以后调用。

 

提交评论

完善CommentForm组件如下:

传统的DOM input元素,由浏览器管理它们的状态(渲染的值),所以实际DOM的状态可能与组件不同,这点不是很好。在React中始终渲染视图的状态,不仅只在初始化的时候渲染。所以,React使用this.state来保存用户的输入,初始化一个state包含2个属性(author,text)。

React添加事件的名称遵循驼峰规则,继续完善提交部分的事件代码:

 

当用户提交评论以后,需要刷新评论列表,这件事情需要在CommentBox组件里面完成,因为CommentBox拥有评论数据的state,这里需要把新的评论从子组件传递给父组件。实现方法是:在父组件添加一个方法传递给子组件的属性,在子组件的submit事件里面调用该属性。

在父级CommentBox里面定义方法,赋给子组件的属性,在子组件里面调用并传递数据给了父组件进行处理

 

下载整个demo源

 

本文参考原文:https://facebook.github.io/react/docs/tutorial.html

reactjs
作者:张雪飞
出处:https://zhangxuefei.site/p/1309
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注