文享日志

React学习-时钟案例

React.js 代码

发表于2018年11月19日00:34:26

更新于2018年11月19日13:44:56

0条评论 197次阅读

案例一:

重点:组件渲染

function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>现在是 {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('example1') ); } setInterval(tick, 1000);

组件通过render函数进行渲染。(这里用了setInterval函数,其实React会比较更新前后的数据变化,进行局部更新,性能要好不少)

案例二:

重点:组件传参

function Clock(props) { //函数有参数props-这里不知道为什么不显示出来 return ( <div> <h1>Hello, world</h1> <h2>现在是 {props.date.toLocaleTimeString()}.</h2> </div> ); } function tick2() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('example2') ); } setInterval(tick2, 1000);

调用组件时,组件上的参数都会被归到props参数中,在组件内部可以通过props访问到。这里注意,如果传递的是函数的话,涉及父组件参数时,一定要绑定父组件作用域。

案例三:

重点:定义组件的另外一种方式

class Clock3 extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2> </div> ); } } function tick3() { ReactDOM.render( <Clock3 date={new Date()} />, document.getElementById('example3') ); } setInterval(tick3, 1000);

既可以通过案例2中的函数方式定义一个组件,也可以通过本案例定义一个组件。函数定义组件方式是React专门为只有render方法的组件提供的一种更简便的定义组件的方式。

注意组件名称区分于HTML标签,组件名首字母必须大写。此外组件中只能包含一个顶层标签。

案例四:

重点:state保存组件内部状态

class Clock4 extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock4 />, document.getElementById('example5') );

state保存了组件内部状态,组件内通过this.state即可访问到

案例五:

重点:1、setState更改组件内部状态 2、生命周期componentDidMount函数在state改变之后调用

function FormattedDate(props) { //有参数props return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>; } class Clock5 extends React.Component { constructor(props) { super(props); this.state = {date: props.date}; } //生命周期函数,render函数运行完之后调用 componentDidMount() { this.timerID = setInterval(() => this.tick(),1000); //箭头函数()=>this.tick() } //生命周期函数,卸载组件时调用 componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({date: new Date()}); } render() { return ( <div> <h1>Hello, world!Clock5</h1> <FormattedDate date={this.state.date} /> </div> ); } } ReactDOM.render( <Clock5 date={new Date()}/>, document.getElementById('example6') );

组件内部的state只能由setState函数改变,setState函数我了解的有两种方式

//第一种,参数为对象 this.setState({ this.state = this.state + 1 ; }) //第二种,参数为函数 this.setState((prevState)=>( //函数有参数prevState this.state = prevState.state + 1 ; ))

注意:参数为函数时必须有返回(这里箭头函数函数体为单语句,可以省略return关键字)
生命周期这里就先不说了,过两天在写一篇介绍一下React的生命周期。


首发 : vHanblog

原文链接 : http://blog.docmobile.cn/artical/1542558867045

👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广