React系列三(React-组件)
2018-03-06 16:46
477 查看
React系列三(React-组件)
一、React.createClass
React 允许将代码封装成组件(component),然后像插入普通HTML标签一样,在网页中插入这个组件。 React.createClass方法用于生成一个组件类XXX,<XXX /> 实例组件类并输出信息。 模板插入<XXX />组件类时,会自动生成XXX的一个实例(下文的"组件"都指组件类的实例)。 所有组件类都必须有自己的 render 方法,用于输出组件。
注意,原生 HTML 元素名以小写字母开头,而自定义的React类名以大写字母开头,否则会报错,比如 HelloMessage 不能写成helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>React初体验</title> <!-- 引入React三个文件--> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="text"></div> <script type="text/babel"> var HelloReact=React.createClass({ render:function(){ return <h1>欢迎使用react</h1>; } }); ReactDOM.render( <HelloReact />, document.getElementById("text") ); </script> </body> </html>
二、使用 this.props 对象向组件传递参数
组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,组件的属性可以在组件类的this.props对象上获取。 比如 name 属性就可以通过 this.props.name 读取。 注意,在添加属性时,class属性需要写成className,for属性需要写成htmlFor,这是因为class和for是JavaScript 的保留字。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>向组件传递参数</title> <!-- 引入React三个文件--> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="text"></div> <script type="text/babel"> var SayHello=React.createClass({ render:function(){ return <p>Hello {this.props.name}</p>; } }); ReactDOM.render( <SayHello name="pangtong" />, document.getElementById("text") ); </script> </body> </html>
三、复合组件
可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>复合组件</title> <!-- 引入React三个文件--> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="text"></div> <script type="text/babel"> var Name=React.createClass({ render:function(){ return ( <p>{this.props.name}</p> ); } }); var Link=React.createClass({ render:function(){ return ( <a href={this.props.site}> {this.props.site} </a> ); } }); var WebSite=React.createClass({ render:function(){ return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); ReactDOM.render( <WebSite name="百度" site="https://www.baidu.com" />, document.getElementById("text") ); </script> </body> </html>
四、React组件API
设置状态:setState替换状态:replaceState
设置属性:setProps
替换属性:replaceProps
强制更新:forceUpdate
获取DOM节点:findDOMNode
判断组件挂载状态:isMounted
五、设置状态setState
用法: setState(object nextState[, function callback]) 参数说明: nextState,将要设置的新状态,该状态会和当前的state合并 callback,可选参数,回调函数。该函数会在setState设置成功,且组件重新渲染后调用。 合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。
关于setState
不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>使用React的setState实现计数器</title> <!-- 引入React三个文件--> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="count"></div> <script type="text/babel"> var Counter = React.createClass({ getInitialState:function(){ return {count:0}; }, handleClick:function(){ this.setState(function(state){ return { count:this.state.count+1 }; }); }, render:function(){ return (<button onClick={this.handleClick}>点我的次数为{this.state.count}</button>); } }); ReactDOM.render( <Counter />, document.getElementById("count") ); </script> </body> </html>
六、替换状态replaceState
用法: replaceState(object nextState[, function callback]) 参数说明: nextState,将要设置的新状态,该状态会替换当前的state。 callback,可选参数,回调函数。该函数会在replaceState设置成功,且组件重新渲染后调用。 replaceState()方法与setState()类似,但是方法只会保留nextState中状态,原state不在nextState中的状态都会被删除。
七、设置属性setProps
用法: setProps(object nextProps[, function callback]) 参数说明: nextProps,将要设置的新属性,该状态会和当前的props合并 callback,可选参数,回调函数。该函数会在setProps设置成功,且组件重新渲染后调用。 设置组件属性,并重新渲染组件。 props相当于组件的数据流,它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时, 我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染,可以使用setProps()。 更新组件,我可以在节点上再次调用React.render(),也可以通过setProps()方法改变组件属性,触发组件重新渲染。
八、替换属性replaceProps
用法: replaceProps(object nextProps[, function callback]) 参数说明: nextProps,将要设置的新属性,该属性会替换当前的props。 callback,可选参数,回调函数。该函数会在replaceProps设置成功,且组件重新渲染后调用。 replaceProps()方法与setProps类似,但它会删除原有 props。
九、强制更新forceUpdate
用法: forceUpdate([function callback]) 参数说明: callback,可选参数,回调函数。该函数会在组件render()方法调用后调用。 forceUpdate()方法会使组件调用自身的render()方法重新渲染组件,组件的子组件也会调用自己的render()。但是, 组件重新渲染时,依然会读取this.props和this.state,如果状态没有改变,那么React只会更新DOM。 forceUpdate()方法适用于this.props和this.state之外的组件重绘(如:修改了this.state后),通过该方法 通知React需要调用render() 一般来说,应该尽量避免使用forceUpdate(),而仅从this.props和this.state中读取状态并由React触发 render()调用。
十、获取DOM节点findDOMNode
用法: DOMElement findDOMNode() 返回值: DOM元素DOMElement 如果组件已经挂载到DOM中,该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时, this.findDOMNode()也会返回null。从DOM 中读取值的时候,该方法很有用,如:获取表单字段的值和做一些 DOM 操作。
十一、判断组件挂载状态isMounted
用法: bool isMounted() 返回值: true或false,表示组件是否已挂载到DOM中 isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的 调用不会出错。
相关文章推荐
- React 深入系列1:React 中的元素、组件、实例和节点
- 《React-Native系列》19、 ListView组件之上拉刷新(iOS和Android通用)
- React 深入系列1:React 中的元素、组件、实例和节点
- 《React-Native系列》36、 ReactNative地图组件
- React系列之--组件的生命周期
- 从 0 到 1 实现 React 系列 —— 2.组件和 state|props
- 在react中如何使用tab组件-小白系列 es6
- ReactJS学习系列课程(props 组件属性)
- react系列(三)组件间通信
- React 深入系列1:React 中的元素、组件、实例和节点
- 《React-Native系列》37、 ReactNative百度地图开源组件使用
- ReactJS学习系列课程(React 组件的组合使用)
- react系列(二)高阶组件-HOC
- 《React-Native系列》38、 ReactNative混合组件封装
- React Native组件系列之ImageBackground
- 《React-Native系列》16、 RN组件之ListView
- ReactNative系列之十二图标组件react-native-vector-icons的使用
- 【React Native开发】React Native控件之Touchable*系列组件详解(18)
- React系列二——组件
- 【React Native开发】React Native控件之Touchable*系列组件详解(18)