首页 > 专栏 > 前端 > 文章详情
this.fn() 是啥意思 发布于:2021-02-06 11:13:34   原创发表   查看:6  讨论:0
react官网实例:
class Timer extends React.component{pAk易塔云建站-模板下载,web开发资源,技术博客
    //构造函数pAk易塔云建站-模板下载,web开发资源,技术博客
    constructor(props) {pAk易塔云建站-模板下载,web开发资源,技术博客
        super : (props);pAk易塔云建站-模板下载,web开发资源,技术博客
        this.state = {//这里面的this.state就是指在这里调用,this就是调用的意思pAk易塔云建站-模板下载,web开发资源,技术博客
            seconds : 0pAk易塔云建站-模板下载,web开发资源,技术博客
        }pAk易塔云建站-模板下载,web开发资源,技术博客
    };pAk易塔云建站-模板下载,web开发资源,技术博客
    //一个累加pAk易塔云建站-模板下载,web开发资源,技术博客
    tick(){pAk易塔云建站-模板下载,web开发资源,技术博客
        this.setState((state,props)=>{pAk易塔云建站-模板下载,web开发资源,技术博客
            seconds: this.state.seconds + 1pAk易塔云建站-模板下载,web开发资源,技术博客
        })pAk易塔云建站-模板下载,web开发资源,技术博客
    };//这里的箭头函数,返回的是一个对象,那么函数体要用()括起来,语法冲突。pAk易塔云建站-模板下载,web开发资源,技术博客
    tick(){pAk易塔云建站-模板下载,web开发资源,技术博客
        this.setState((state,props)=>({pAk易塔云建站-模板下载,web开发资源,技术博客
            seconds: this.state.seconds + 1pAk易塔云建站-模板下载,web开发资源,技术博客
        }))pAk易塔云建站-模板下载,web开发资源,技术博客
    };pAk易塔云建站-模板下载,web开发资源,技术博客
    //不停渲染pAk易塔云建站-模板下载,web开发资源,技术博客
    componentDidMount(){pAk易塔云建站-模板下载,web开发资源,技术博客
        setInterval(()=>{this.tick()},1000);//this.tick()就是在这里调用一次的意思pAk易塔云建站-模板下载,web开发资源,技术博客
    }pAk易塔云建站-模板下载,web开发资源,技术博客
    //渲染到虚拟DOMpAk易塔云建站-模板下载,web开发资源,技术博客
    render() {pAk易塔云建站-模板下载,web开发资源,技术博客
        return <div>seconds : {this.state.seconds}</div>;pAk易塔云建站-模板下载,web开发资源,技术博客
    };pAk易塔云建站-模板下载,web开发资源,技术博客
}pAk易塔云建站-模板下载,web开发资源,技术博客
export default Timer;pAk易塔云建站-模板下载,web开发资源,技术博客
ReactDOM.render(<Timer />,document.getElementById("root"));

评论

  • 匿名