React思考题

1、组件为什么要大写?

2、props如何声明默认值

方法一:

class Demo extends React.Component {
    constructor() {
      ......
    }

    // static是es6的语法
    static defaultProps = {
        age: 20
    }

    render() {
      return (<div> the age is { this.props.age } </div>)
    }
}

ReactDOM.render(<Demo />, document.getElementById('root'))

方法二:

class Demo extends React.Component {
    constructor() {
      ......
    }

    render() {
      return (<div> the age is { this.props.age } </div>)
    }
}

Demo.defaultProps = {
    age: 20
}

ReactDOM.render(<Demo />, document.getElementById('root'))

3、如何进行props的类型检测

4、三种转this作用域的方法哪个更好?为什么?

方法一:

class Demo extends React.Component {

    constructor() {
        super();
        this.state = {
            count: 0,
            time: (new Date()).toLocaleTimeString()
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        alert(this.state.count)
    }

    render() {
        
        return (<div onClick={this.handleClick}> this time is { this.state.time } </div>)
    }
}

ReactDOM.render(<Demo />, document.getElementById('root'));

方法二:

class Demo extends React.Component {

    constructor() {
        super();
        this.state = {
            count: 0,
            time: (new Date()).toLocaleTimeString()
        }
    }

    handleClick() {
        alert(this.state.count)
    }

    render() {
        
        return (<div onClick={this.handleClick.bind(this)}> this time is { this.state.time } </div>)
    }
}

ReactDOM.render(<Demo />, document.getElementById('root'));

方法三:

class Demo extends React.Component {

    constructor() {
        super();
        this.state = {
            count: 0,
            time: (new Date()).toLocaleTimeString()
        }
    }

    handleClick() {
        alert(this.state.count)
    }

    render() {
        
        return (<div onClick={() => {this.handleClick}}> this time is { this.state.time } </div>)
    }
}

ReactDOM.render(<Demo />, document.getElementById('root'));

方法四:

class Demo extends React.Component {

    constructor() {
        super();
        this.state = {
            count: 0,
            time: (new Date()).toLocaleTimeString()
        }
    }
        
    // 这里的handleClick是一个属性,代表一个匿名函数,通过this.handleClick可以访问到这个属性值,也就是这个匿名函数
    handleClick = () => {
        alert(this.state.count)
    }

    render() {
        return (<div onClick={this.handleClick}> this time is { this.state.time } </div>)
    }
}

ReactDOM.render(<Demo />, document.getElementById('root'));

this.handleClick.bind(this)会生成新的函数(this.handleClick !== this.handleClick.bind(this),bind方法会返回新的函数),所以方法二和方法三不推荐使用,性能不好,每次渲染都会生成新的函数。方法一和方法三都可以。

5、什么是迭代器?迭代器有什么用?

6、了解generator以及co模块

7、使用修饰器实现一个安全渲染功能,要对react component的所有生命周期函数都进行try/catch

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏专知

2018年SCI期刊最新影响因子排行,最高244,人工智能TPAMI9.455

2018年6月26日,最新的SCI影响因子正式发布,涵盖1万2千篇期刊。CA-Cancer J Clin 依然拔得头筹,其影响因子今年再创新高,达244.585...

1272
来自专栏linux驱动个人学习

高通msm8909耳机调试

1、DTS相应修改: DTS相关代码:kernel/arch/arm/boot/dts/qcom/msm8909-qrd-skuc.dtsi: 1 s...

7475
来自专栏Hongten

spring开发_JDBC操作MySQL数据库_使用xml配置事务管理

http://www.cnblogs.com/hongten/archive/2012/03/09/java_spring_jdbc.html

621
来自专栏码匠的流水账

spring security reactive获取security context

本文主要研究下reactive模式下的spring security context的获取。

1762
来自专栏码匠的流水账

java9系列(五)Stack-Walking API

java9新增这个类的目的是提供一个标准API用于访问当前线程栈,之前只有Throwable::getStackTrace、Thread::getStackTr...

421
来自专栏余生开发

echarts太阳分布图-饼图来回穿梭

var dom = document.getElementById("container");

1172
来自专栏码匠的流水账

聊聊HystrixThreadPool

hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java

771
来自专栏增长技术

App Guide相关

##TourGuide https://github.com/worker8/TourGuide

702
来自专栏前端儿

Web 前端颜色值--字体--使用,整理整理

颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 2...

2272
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1112

扫码关注云+社区