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

相关文章

来自专栏Golang语言社区

Go语言实现猜数字小游戏的方法

package main import ( "bufio" "fmt" "math/rand" "os" "strconv" ...

3095
来自专栏程序员的知识天地

JavaScript学习笔记

【如果大家对程序员,web前端感兴趣,想要学习的,关注一下小编吧。加群:731771211。免费赠送web前端系统的学习资料!!前端学习必备公众号ID:mtbc...

1602
来自专栏JadePeng的技术博客

MarkDown 常用语法教程

MarkDown 语法说明 [TOC] 标题 标题1 ====== 标题2 ----- ## 大标题 ### 小标题 #### 小标题 列表 无序列表 ...

2664
来自专栏九彩拼盘的叨叨叨

学习纲要:ES6系列:箭头函数和对象方法简写

862
来自专栏一枝花算不算浪漫

[jQuery学习系列一]1-选择器与DOM对象

35911
来自专栏PHP在线

jquery事件

parent > child在给定的父元素下匹配所有的子元素 参数 parentSelectorV1.0 任何有效选择器 childSelectorV1.0 用...

3227
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(四)节点

页面中的所有内容,包括标签,属性,文本(文字,空格,回车,换行等),也就是说页面的所有内容都可以叫做节点。

1254
来自专栏前端小叙

jquery方法.serializeArray()获取name和value并转为json数组

1153
来自专栏Android常用基础

自定义View(四)-动画- Interpolator与Evaluator

Interpolator插值器之前我们已经接触过了,而Evaluator好像我们还没有将,这是属性动画中俩个比较中的两个知识点,弄清楚它们有助于我们更好的使用与...

1562
来自专栏运维

JavaScript 学习总结

Java和Javascript的区别就像印度和印度尼西亚的区别,名字中有点相同的东西。

2143

扫码关注云+社区