React 事件系统
用户界面除了展示页面信息外,还要响应用户事件。React会将事件处理程序绑定到组件上来处理事件。事件被触发的同时,更新组件的内部状态。组件内部状态的更新,会触发组件的重绘。借助这些机制,我们能够轻松的响应用户输入,并根据用户输入内容完成用户界面的更新。
阅读全文用户界面除了展示页面信息外,还要响应用户事件。React会将事件处理程序绑定到组件上来处理事件。事件被触发的同时,更新组件的内部状态。组件内部状态的更新,会触发组件的重绘。借助这些机制,我们能够轻松的响应用户输入,并根据用户输入内容完成用户界面的更新。
阅读全文JSX
赋予了React组件强大的表现能力,它允许我们使用类似HTML的语法来创建自定义元素和组件。结合小巧、简单的组件和数据对象,可以构造出庞大而复杂的组件,这就是组件复合
。
在HTML,元素(Element
)是组成页面的基本元素。而在React中,组成页面的基本元素是组件
。React组件本质上是一个JavaScript函数,它接受属性(props)和状态两个参数,并输出render()
渲染好的HTML。设计组件时,应该把通用元素(如:按钮、输入框、表单、布局组件等)拆分成接口定义良好的、可复用的、独立的组件,这样不仅可以提高UI的开发效率,同时可以使代码结构更为清晰、减少程序BUG和降低维护成本。
React 组件实例在渲染的时候(实例化
)创建,这些实例在接下来渲染中会被重复使用。要调用组件上的API,首先需要获取对组件的引用。在组件方法内部可以通过this
访问,在组件外唯一访问组件方法就是通过React.render
的返回值,在其它组件内访问组件,可以使用refs
获得对组件的引用。
React 基于状态实现对DOM控制和渲染。组件状态分为两种:一种是组件间的状态传递、另一种是组件的内部状态,这两种状态使用props
和state
表示。props
用于从父组件到子组件的数据传递。组件内部也有自己的状态:state
,这些状态只能在组件内部修改。
使用React.createClass()
方法创建组件时,需要传入一个参数对象,React会根据这个对象创建组件。这个参数对象中,除了包含必须要实现的render
方法外,还有一些组件的设置属性。组件生命周期中的一些处理函数,也是在这个对象中定义的
React中一个组件就是一个状态机,在组件的生命周期中,随着组件props或state的改变,其DOM表现形式也会有所变化。React组件的生命周期分为:创建期、存在期、销毁&清理期,在生命周期的不同阶段,React提供了不同的处理函数(组件API),通过这些处理函数使我们能够实现对组件整个生命周期内的控制和处理。
阅读全文React组件及子组件最终通过render
方法渲染到DOM中,该方法由ReactDOM
类库提供。页面的渲染可以在客户端或服务端完成,ReactDOMServer
类库使你可以在服务端完成组件的渲染。通过this.props.children
属性可以访问组件的子节点,而对子节点的处理的方法则由React.Children
类提供。
JSX
可以减少定义组件的复杂性,但对于React来说 JSX 并不是必须的,JSX 标签最终会被转换为原生的JavaScript。除使用JSX
语法外,还可以使用React
提供的API来创建组件。本文将介绍使用React创建元素,及一些React中重要的API。
JSX
语法很像HTML,但它并不是HTML的复制品。JSX 规范中也有所说明:JSX
并不尝试去遵循任何XML或HTML规范,而是做为一种ECMAScript特性设计的。