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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.03.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录