React核心内容归纳总结
状态、属性、组件API、组件的生命周期 当react的状态改变时,自动执行this.render()方法更新组件 constructor(props) { super(props); this.state = { liked: false }; this.handleClick = (e) => { this.setState({liked: !this.state.liked}); }; } 状态 import React from 'react'; class LikeButton extends React.Component { // es6用constructor代替getInitialState constructor(props) { super(props); this.state = { liked: false } } handleClick (e) { this.setState({liked: !this.state.liked}) } render () { let text = this.state.liked ? '喜欢': '不喜欢'; return ( <div> <p onClick={this.handleClick.bind(this)}> 你喜欢红茶吗?{text} </p> </div> ) } } export default LikeButton; props import React from 'react'; class HelloMessage extends React.Component { render () { return ( <div> Hello,{this.props.name} </div> ) } } export default HelloMessage; main.js import React from 'react'; import ReactDOM from 'react-dom'; import HelloMessage from './component/HelloMessage'; const app = document.getElementById('app'); ReactDOM.render(<HelloMessage name="Runoob"/>,app); props验证 import React from 'react'; class HelloMessage extends React.Component { render () { return ( <div> Hello,{this.props.name} </div> ) } } // getDefaultProps要写在外部 HelloMessage.defaultProps = { name: 'this is default name' }; HelloMessage.propTypes = { name: React.PropTypes.string.isRequired }; export default HelloMessage; 更多验证器 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,// 可以被渲染的对象 numbers,strings,elements 或 array optionalNode: React.PropTypes.node,// React 元素 optionalElement: React.PropTypes.element,// 用 JS 的 instanceof 操作符声明 prop 为类的实例。 optionalMessage: React.PropTypes.instanceOf(Message),// 用 enum 来限制 prop 只接受指定的值。 optionalEnum: React.PropTypes.oneOf(['News','Photos']),// 可以是多个对象类型中的一个 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),// 特定 shape 参数的对象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string,fontSize: React.PropTypes.number }),// 任意类型加上 `isRequired` 来使 prop 不可空。 requiredFunc: React.PropTypes.func.isRequired,// 不可空的任意类型 requiredAny: React.PropTypes.any.isRequired,// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。 customProp: function(props,propName,componentName) { if (!/matchme/.test(props[propName])) { return new Error('Validation failed!'); } } },/* ... */ }); React组件API React.findDOMNode()只在mounted组件中调用,如果在组件的render()方法中调用React.findDOMNode()就会抛出异常。
生命周期方法 用state判断是否已经插入真实DOM componentWillMount() { this.mounted = false; } componentDidMount() { this.mounted = true; } 需求:写一个实例,在组件加载以后,通过componentDidMount设置一个定时器,改变组件的透明度并重新渲染 import React from 'react'; class HelloMessage extends React.Component { constructor (props) { super(props); this.state = { opacity: 1.0 }; } componentDidMount () { this.timer = setInterval(() => { let opacity = this.state.opacity; opacity -= 0.05; if(opacity <= 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); },100); } render () { let myStyle = { fontFamily: 'microsoft yahei',width: '100%',height: '100px',background: 'red',opacity: this.state.opacity }; return ( <div style={myStyle}> Hello,{this.props.name} <p>{this.state.opacity}</p> </div> ) } } // getDefaultProps要写在外部 HelloMessage.defaultProps = { name: 'this is default name' }; HelloMessage.propTypes = { name: React.PropTypes.string.isRequired }; export default HelloMessage; 另一个实例,体现react的生命周期 import React from 'react'; class Content extends React.Component { componentWillMount () { console.log('组件将被插入到真实DOM'); } componentDidMount () { console.log('已经插入真实DOM'); } componentWillReceiveProps (newProps) { console.log('组件将要接收属性,新属性是:'); console.log(newProps); } shouldComponentUpdate (newProps,newState) { return true; } componentWillUpdate (nextProps,nextState) { console.log('组件将要更新,下一个属性:' + nextProps + ',下一个状态:' + nextState); console.log(nextProps); } componentDidUpdate (prevProps,prevState) { console.log('组件已更新,上一个属性:' + prevProps + ',上一个状态:' + prevState); console.log(prevProps); } componentWillUnmount () { console.log('已经移除真实DOM'); } render () { return ( <div> 次数:{this.props.myNum} </div> ) } } class Increment extends React.Component { constructor (props) { super(props); this.state = { data: 0 }; } setNewNumber () { this.setState({ data: this.state.data + 1 }); } render () { return ( <div> <button onClick={this.setNewNumber.bind(this)}>Increment</button> <Content myNum={this.state.data}/> </div> ) } } export default Increment; 未完待续 ... ... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |