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

相关文章

来自专栏阿炬.NET

asp.net mvc 验证码

3467
来自专栏JadePeng的技术博客

MarkDown 常用语法教程

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

2784
来自专栏清墨_iOS分享

OpenGLES-03 使用索引绘制矩形

这篇文章我们同样借助上篇文章《OpenGLES-02 绘制基本图元(点、线、三角形)》的代码,使用另外一种画法来绘制一个矩形。 修改render方法如下: -(...

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

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

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

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

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

1384
来自专栏前端知识分享

第61天:json遍历和封装运动框架(多个属性)

 var json = {width:200,height:300,left:50} console.log(json.width); for(var k in...

912
来自专栏Java帮帮-微信公众号-技术文章全总结

JavaWeb02-CSS,JS(Java真正的全栈开发)

? css&javascript 一.CSS 1.CSS介绍 CSS 指层叠样式表 (Cascading Style Sheets),用来定义网页的显示效果。...

45615
来自专栏Golang语言社区

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

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

3265
来自专栏mini188

学习笔记 :DrawText

最近在做一个TStringGrid的自绘处理,在画文字处理上遇到了高度的计算问题。后来经过一段时间还是找到了一些方法: 1、使用TLabel   这个方法是有点...

2615
来自专栏Android常用基础

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

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

2062

扫码关注云+社区

领取腾讯云代金券