React

作者: 韦卓凡 | 来源:发表于2018-07-23 07:51 被阅读0次

用 function 创造 component (无状态组件)

    function Clock(props){
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {props.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
    function tick() {
        ReactDOM.render
            ReactDOM.render(<Clock/>, document.getElementById('root'));
        );
    }

    setInterval(tick, 1000);

用 Class 创造 component
State 只能存在于用Class 创造 component里

    class Clock1 extends React.Component{
        render(){
            return (
                <div>
                    <h1>Hello, world!</h1>
                    <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
                </div>
            );
        }
    }
    function tick() {
        ReactDOM.render(
            <Clock1 date={new Date()}/>,
            document.getElementById('root')
        );
    }

    setInterval(tick, 1000);

React LifeCycle Method

reactLifeCycle.png
componentDidMount() {} //第一次render后会call
componentWillUnmount() {} // 马上unmount 用于回收资源等

Do Not Modify State Directly

this.state.comment = 'Hello'; // Wrong 只能在constractor里 state = " xxx " 
this.setState({comment: 'Hello'}); // Correct

//并不是立即执行 是一个异步的布置任务
// setState()---------render()之间运行
this.setState({ 
  counter: this.state.counter + this.props.increment,
}

相关文章

  • React基础

    react 教程 react 组件介绍 react state 介绍 react Props 介绍 React:组...

  • 学习react no.1

    学习react no.1 react 定义 react 特点 react

  • React Native 学习之路

    React 相关资料 React Components React Properties React State ...

  • React基础

    React包含react元素和react组件 react元素 react组件 react组件分为函数组件和类组件 ...

  • React面试题 整理脑图

    react基础 React生命周期 react-router react进阶 react Hooks redux 其他

  • react 导入中的 as

    import React from 'react'只导入 是 React。 而import * as React ...

  • ES5与ES6小结部分

    1var React=require('react'); 等价 import React from ' react...

  • React DnD基础概念和整体架构

    React DnD 的英文是 Drag and Drop for React。React DnD 是 React ...

  • React

    React 《React 官网文档》 React简介 React概念 React官网学习实践 - jSX简介 Re...

  • React学习笔记_01

    React 基础组件 react概述 npm i react react-dom react包 是核心,提供创建元...

网友评论

      本文标题:React

      本文链接:https://www.haomeiwen.com/subject/bicdmftx.html