对ReactJs的认知
一、ReactJS原理与组件化 React引入虚拟DOM的机制：基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。 所谓组件，即封装起来的具有独立功能的UI部件。 React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。 React组件的特性：可重用性、可组合性、可维护性。
二、ReactJs使用 React不需要安装，直接到官网下载ReactJs即可。 一个完整使用例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.runoob.com/assets/react/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
react.js 、react-dom.js 和 Browser.js这三个库需先加载 react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，应该将它放到服务器完成。 凡是使用 JSX 的地方，都要加上 type="text/babel"，JSX遇<开头用html规则解析，遇到{用Javascript规则解析。 var names=['alice','emily','kate']; ReactDOM.render( <div> { names.map(function(name){ return <div>Hello,{name}!</div> }) } </div>, document.getElementById('example') ); 模板转为html语言并插入DOM节点 ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
2.1 Hello World例子 <!DOCTYPE html> <html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
2.2 ReactJS组件 创建组件 React 允许将代码封装成组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。 组件类首字母必须大写 组件类只能够包含一个顶层标签 组件类必须有自己的render方法，用于输出组件 组件属性用this.props获取（注：class要变为className,for变为htmlFor） 自定义属性用data-为前缀 var HelloWorld=React.createClass({ render:function(){ return <h1> Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloWorld name="Join" className="helloworld" />, document.getElementById('example') );
复合组件 创建多个组件来合成一个组件，即把组件的不同功能点进行分离 var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); var Name = React.createClass({ <h1>{this.props.name}</h1> var Link = React.createClass({ <a href={this.props.site}> {this.props.site} </a> React.render( <WebSite name="hello" site="https://www.baidu.com/" />, document.getElementById('example') 创建多个组件来合成一个组件，即把组件的不同功能点进行分离
组件state state通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。只需更新组件的 state，然后根据新的 state 重新渲染用户界面就可以达到与用户交互的目的。 var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); render: function() { var text = this.state.liked ? '喜欢' : '不喜欢'; return ( <p onClick={this.handleClick}> 你<b>{text}</b>我。点我切换状态。 </p> ); } }); React.render( <LikeButton />, document.getElementById('example') getInitialState 方法用于定义初始状态。通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
组件props state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。有些容器组件需要定义 state 来更新和修改数据, 而子组件只能通过 props 来传递数据。 var WebSite = React.createClass({ getInitialState: function() { return { name: "测试", site: "http://www.baidu.com" }; }, render: function() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } }); React.render( <WebSite />, document.getElementById('example') 混合使用state跟props var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="Runoob" />, document.getElementById('example') ); 使用props var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ <a href={this.props.site}> {this.props.site} </a> var HelloMessage = React.createClass({ getDefaultProps: function() { return { name: 'Runoob' }; }, render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') ); 使用state
组件设置默认值及验证 var Mytitle=React.crateClass({ propTypes:{title:React.propTypes.String.isRequired},//此可验证属性值是否符合要求 getDefaultProps:function(){ return {title:'hello world'}; //设置组件默认值 }, render:function(){ return <h1>{this.props.title}</h1>; } }); Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
更多验证器 React.createClass({ propTypes: { // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalNode: React.PropTypes.node, // 可以被渲染的对象 numbers, strings, elements 或 array optionalElement: React.PropTypes.element,// React 元素 optionalMessage: React.PropTypes.instanceOf(Message), // 用 JS 的 instanceof 操作符声明 prop 为类的实例。 optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),// 用 enum 来限制 prop 只接受指定的值。 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 可以是多个对象类型中的一个 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 指定类型组成的数组 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),// 指定类型的属性构成的对象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }),// 特定 shape 参数的对象 requiredFunc: React.PropTypes.func.isRequired, // 任意类型加上 `isRequired` 来使 prop 不可空。 requiredAny: React.PropTypes.any.isRequired, // 不可空的任意类型 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } }// 自定义验证器。如果验证失败需要返回一个 Error 对象。 });
组件API 设置状态：setState 替换状态：replaceState 设置属性：setProps 替换属性：replaceProps 强制更新：forceUpdate 获取DOM节点：findDOMNode 判断组件挂载状态：isMounted setState(object nextState[, function callback]) replaceState(object nextState[, function callback]) setProps(object nextProps[, function callback]) replaceProps(object nextProps[, function callback]) forceUpdate([function callback]) DOMElement findDOMNode() bool isMounted() replaceProps(object nextProps[, function callback]) nextProps，将要设置的新属性，该属性会替换当前的props。 callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。 replaceProps()方法与setProps类似，但它会删除原有props 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()调用。 DOMElement findDOMNode() 返回值：DOM元素DOMElement 如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时，this.findDOMNode()也会返回null。从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。 bool isMounted() 返回值：true或false，表示组件是否已挂载到DOM中 isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。 setProps(object nextProps[, function callback]) nextProps，将要设置的新属性，该状态会和当前的props合并 callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。 设置组件属性，并重新渲染组件。 props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。 更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。 setState(object nextState[, function callback]) nextState，将要设置的新状态，该状态会和当前的state合并 callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。 不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。 setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。 setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。 setState例子 var Counter = React.createClass({ getInitialState: function () { return { clickCount: 0 }; }, handleClick: function () { this.setState(function(state) { return {clickCount: state.clickCount + 1}; }); render: function () { return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>); } ReactDOM.render( <Counter />, document.getElementById('message') ); replaceState(object nextState[, function callback]) nextState，将要设置的新状态，该状态会替换当前的state。 callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。 replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。
组件生命周期 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 var Button = React.createClass({ getInitialState: function() { return { data:0 }; }, setNewNumber: function() { this.setState({data: this.state.data + 1}) render: function () { return ( <div> <button onClick = {this.setNewNumber}>INCREMENT</button> <Content myNumber = {this.state.data}></Content> </div> ); } }); var Content = React.createClass({ componentWillMount:function() { console.log('Component WILL MOUNT!') componentDidMount:function() { console.log('Component DID MOUNT!') componentWillReceiveProps:function(newProps) { console.log('Component WILL RECIEVE PROPS!') shouldComponentUpdate:function(newProps, newState) { return true; }, componentWillUpdate:function(nextProps, nextState) { console.log('Component WILL UPDATE!'); componentDidUpdate:function(prevProps, prevState) { console.log('Component DID UPDATE!') componentWillUnmount:function() { console.log('Component WILL UNMOUNT!') render: function () { return ( <div> <h3>{this.props.myNumber}</h3> </div> ); } }); ReactDOM.render( <Button /> </div>, document.getElementById('example') 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方法有： componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnmount在组件从 DOM 中移除的时候立刻被调用
组件 AJAX React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。 var UserGist = React.createClass({ getInitialState: function() { return { username: '', lastGistUrl: '' }; }, componentDidMount: function() { this.serverRequest = $.get(this.props.source, function (result) { var lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); }.bind(this)); componentWillUnmount: function() { this.serverRequest.abort(); render: function() { return ( <div> {this.state.username} 用户最新的 Gist 共享地址： <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a> </div> ); } }); ReactDOM.render( <UserGist source="https://api.github.com/users/octocat/gists" />, document.body