React基础的思考题

• 1. 组件为什么要大写？
     其实JSX是React.createElement()的语法糖，标签名为小写表示为DOM标签，而大写表示为组件。

     大小写组件，渲染的结果是不一样的，小写被当成HTML标签来渲染。虽然不会报错，但是只是当成普通HTML标签来体现在DOM结构里。

var app1 = <div>谁跟我一样</div>
var app2 = <foot game='test'></foot>
var app3 = <Foot game='test'></Foot>
  
// babel转义过后
var app1 = React.createElement(
 'div',
 null,
 '\u8C01\u8DDF\u6211\u4E00\u6837'
);
var app2 = React.createElement('foot', { game: 'test' });
var app3 = React.createElement(Foot, { game: 'test' });

• 2. 如何进行props的类型检测？
     使用 PropTypes 进行类型检查

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

• 3. 三种转this作用域的方法哪个更好？为什么？
     组件类的方法默认是不会绑定this值，默认执行undefined，所以需要我们明确绑定方法的this值，一般会有以下三种绑定方式。

值得注意的是，通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，代码请看绑定方式Function.prototype.bind()

• 构造函数绑定this（官方推荐）
  • 好处：是一次到位，避免重新渲染时重复绑定
  • 坏处：多写点代码而已

import React, {Component} from 'react'

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
        this.handleClick = this.handleClick.bind(this)
        // 构造函数里直接箭头函数赋值也是可以的，就不用重复写下面函数代码了
        this.handleClick = (e) => {
            console.log(this.state.message)
        }
    }

    handleClick (e) {
        console.log(this.state.message)
    }

    render () {
        return (
            <div>
                <button onClick={ this.handleClick }>Say Hello</button>
            </div>
        )
    }
}

• Function.prototype.bind()
  好处：无
  坏处：一是重复调用函数，重复绑定this值，二是重复渲染时重复构造新函数

import React, {Component} from 'react'

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }

    handleClick (name, e) {
        console.log(this.state.message + name)
    }

    render () {
        return (
            <div>
                <button onClick={ this.handleClick.bind(this, '赵四') }>Say Hello</button>
            </div>
        )
    }
}

• 箭头函数
  • 好处：自动隐性绑定this值
  • 坏处：一是重新渲染时，重复构造新函数；二是本身是匿名函数，无法通过函数名移除函数

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }

    handleClick (e) {
        console.log(this.state.message)
    }

    render () {
        return (
            <div>
                <button onClick={ ()=>{ this.handleClick() } }>Say Hello</button>
            </div>
        )
    }
}

• 4. 如何避免列表里下标的1和3渲染？

shouldComponentUpdate (nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

---

参考链接

• 关于React学习中的自问
  
• 组件 & Props
• 事件处理
• React绑定this的三种方式