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 条评论
登录 后参与评论

相关文章

来自专栏个人分享

Spark Netty与Jetty (源码阅读十一)

  spark呢,对Netty API又做了一层封装,那么Netty是什么呢~是个鬼。它基于NIO的服务端客户端框架,具体不再说了,下面开始。

904
来自专栏MoeLove

[译]Tornado并发爬虫

Tornado 4.3于2015年11月6日发布,该版本正式支持Python3.5的async/await关键字,并且用旧版本CPython编译Tornado同...

832
来自专栏java技术学习之道

深入浅出MyBatis-快速入门

823
来自专栏java一日一条

Java多线程并发锁和原子操作,你真的了解吗?

对于Java多线程,接触最多的莫过于使用synchronized,这个简单易懂,但是这synchronized并非性能最优的。今天我就简单介绍一...

763
来自专栏Java进阶架构师

透彻理解MyBatis设计思想之手写实现

MyBatis,曾经给我的感觉是一个很神奇的东西,我们只需要按照规范写好XXXMapper.xml以及XXXMapper.java接口。要知道我们并没有提供XX...

861
来自专栏禁心尽力

多线程之策略模式

今天给各位分享一种Java23种设计模式中最常见的设计模式--策略模式。为什么将策略模式和多线程绑在一起呢,不知道各位有没有注意过我们在进行多线程编程的时候,创...

1897
来自专栏Golang语言社区

Golang语言--select

Golang语言--select golang的select与channel配合使用。它用于等待一个或者多个channel的输出。 应用场景:主goroutin...

3327
来自专栏阮一峰的网络日志

什么是 Event Loop?

Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制。 JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题。 ? ...

2648
来自专栏天天P图攻城狮

从源码角度剖析Android系统EGL及GL线程

从事 OpenGL ES 相关开发的技术人员,常常会对一些问题感到困惑,例如GL线程究竟是什么?为什么在这个 GL 线程申请的 texture 不能在另外一个 ...

1.2K11
来自专栏wOw的Android小站

[Android]相册列表加载过程性能优化

在手机中有多个存有图片的文件夹,在recent界面清掉所有的应用,点击进入图库,切换到相册列表。发现要过几秒钟才能从空白页面开始显示文件夹。同时会引起另一问题,...

861

扫码关注云+社区