http://www.devio.org/
贾鹏辉的博园
装载
更新
卸载发现deBUg无法调试的时候,吧8081前的地址改为localhost即可
react。js的生命周期函数
componentWillMount(){ console.log('componentWillMount') } componentDidMount(){ console.log('componentDidMount') } componentWillReceiveProps(nextProps){ //组件在更新的时候嗲用的方法 console.log('componentWillReceiveProps') } shouldComponentUpdate(nextProps){ console.log('shouldComponentUpdate') return true } componentWillUpdate(nextProps,nextState){ console.log('componentWillUpdate') } componentDidUpdate(prevProps,prevState){ console.log('componentDidUpdate') } componentWillUnmount(){ console.log('componentWillUnmount') }
在被调用的组件里定义变量
LiftcircleComponent .js
constructor(props) { // constructor方法,这就是构造方法,完场组件的初始化 super(props); this.state={ count:0, } // 用在子类的构造方法里,主要是调用父类的默认构造方法 }
在方法render方法里定义点击事件
render () { console.log('render') return <View> <Text style={{fontSize:20,backgroundColor:'red'}} onPress={()=>{ this.setState({ count:this.state.count+1, }) }} >有本事你打我啊</Text> <Text style={{fontsize:20}}>被打了{this.state.count}次</Text> </View>; }
如果要卸载组建如何做呢
在调用它的APP.js文件里
也要先定义变量,
render() { var view=this.state.remove?null:<LiftcircleComponent/>; var text=this.state.remove?"让他复活":'干掉他' return ( <View style={styles.container}> <Text style={{fontsize:20}} onPress={()=>{ this.setState({ remove:!this.state.remove }) }}>{text}</Text> {view} {/*<LiftcircleComponent />*/} {/*<Text style={styles.welcome}>*/} {/*大傻逼*/} {/*</Text>*/} {/*<Text style={styles.instructions}>*/} {/*To get started, edit App.js*/} {/*</Text>*/} {/*<Text style={styles.instructions}>*/} {/*{instructions}*/} {/*</Text>*/} </View> ); } }
变量的导入与到处
在
ExportImport.js里定义
var name='熊爱明' var age='22' export {name,age} //变量的导入
在APP.js里导出
import ExportImport,{name,age} from './ExportImport';
然后早render函数里导出
render() { return ( <View style={styles.container}> <Text style={{fontsize:20}} >名字:{name}</Text> <Text style={{fontsize:20}} >年龄:{age}</Text> </View> ); }在
ExportImport.js导出一个方法
// 方法的导出 export function sum(a,b) { return a+b; }
在APP.js里导入
import ExportImport,{name,age,sum} from './ExportImport';
<Text style={{fontsize:20}} onPress={()=>{ var result=sum(2,3); this.setState({ result1:result }) }} >2+3={this.state.result1}</Text>