React 是 Facebook.com 内部使用的一套框架,Instagram 的网页版全部是基于这个框架做的。所以这个框架并不是做出来玩玩的,而是要真正的去解决实际的问题。React 影响了所有的其它的前端框架。如果你现在打算做一个前端应用,除了 Angular ,Ember 以外,也可以考虑一下 React 框架。
React 主要的功能是去创建要显示出来的东西,暂时你可以想成是去创建要显示在网页上的东西。很多网页上的组件并不是静态的,服务端的数据发生变化以后,你要更新这些组件的显示,传统的方法就是刷新整个页面,或者使用 Ajax 请求回数据以后,再根据这些数据去处理组件的显示。React 提供了一套更有效的方法去做这件事。
使用 React ,我们只需要去创建一些要显示的组件,在组件里设置一下什么地方要显示什么样的数据,这样组件就会按照你设计的去显示。当组件里的数据有变化的时候,React 会自动去更新需要更新的组件,从此以后,就不再需要 “找到页面上的 xx 元素,把它里面的内容设置成 yy ” 。
你可以把一个功能分割成不同的小组件,然后把这些组件再组合到一块儿去用。比如一个评论功能,可以分成: “评论包装” — “评论列表” — “评论” — “评论表单” 这些组件。给它们起个名字可以是:CommentBox — CommentList — Comment — CommentForm 。把它们组合到一块儿,这个结构看起来像这样:
<CommentBox> <CommentList> <Comment /> </CommentList> <CommentForm /> </CommentBox>
组件里的数据一般都是它的爸爸传递给它们的,比如这里,CommentBox 可以得到评论的数据,然后传递给 CommentList,再传递给 Comment 。组件之间传递的这些数据在 React 里面叫 props(属性),比如你可以定义一个 author 属性,表示评论的作者,date 属性表示评论的时间,text 属性表示评论的具体的内容。在子组件那里,可以得到这些属性对应的值,然后在指定的地方使用这些数据。
组件需要知道什么时候要重新显示它们自己,可以通过设置一下组件的 state (状态)。从服务端那里得到数据以后,把数据作为组件内部的一个状态,我们重新在服务端那里得到数据以后,就去设置一下组件的这个状态,如果说这个状态跟之前有变化了,组件就会重新显示自己。
还是用这个评论功能为例,在 CommentBox 组件里,可以向服务端去请求数据,最简单的就是使用 Ajax 方法去向服务端发出请求,然后把请求回来的数据放到 CommentBox 组件里定义的某个状态上,比如 data 这个状态,名字是你自己定义的。再把这个状态里的数据,使用属性的方式交给它的儿子去用,也就是 CommentList 。
在 CommentBox 里面,你需要一种方法,可以不断的跟服务端沟通,比如 WebSocket ,服务端上的数据有变化以后,就告诉 CommentBox ,这个组件可以重新设置一下它的 data 状态,这样就会重新显示组件,也就是把发生变化的数据表示出来。最简单的方法也可以使用 Ajax 的方式每隔几秒钟就向服务端请求一次数据。
React