ES6标准入门-阮一峰

1.let和const

暂时性死区（Temporal Dead Zone)
let和const命令声明的变量吴变量提升，且都会被锁定在声明的代码块中，在let和const命令行前，使用该变量都将报错，这一部分称为”暂时性死区”.

1
2
3
4
5
6
var tmp = 123;

if(true){
    tmp = 'abc'; //ReferenceError
    let tmp;
}

let tmp 将tmp变量绑定在 {}代码块之内，外部的tmp声明无效，tmp=’abc’就处在死去，所以报错。同理在以前没有let和const命令的时候，typeof是一个安全的运算符，即使变量没有被声明，也会正常返回undefined,但如果typeof处在死区中，处理了在后文被let和const的变量，将会报错。

1
2
3
4
5
6
7
typeof undeclared_variable;//undefined 未被let和const声明反而没事
if(true){
    //TDZ开始 (Temporal Dead Zone: 暂时性死区)
    typeof tmp //ReferenceError
    let tmp;//TDZ结束
    console.log(tmp);//undefined
}

顶层对象
var和function的全局声明会自动绑定到window或者global对象，

展开全文 >>

React面试题

1.什么是React？

React是一个开源的前端JavaScript库，用于构建用户界面，尤其是单页面的应用。它用与处理网页和移动应用程序的试图层.React是由Facebook的软件工程师jordan walke创建，在2011年React应用首次被部署到Facebook的信息流中，之后与2012年被应用到instagram上

2.React的主要特点是什么？

React的主要特性有：

  • 考虑到真实的DOM操作成本很高，它使用VirtualDOM不是真实的DOM.
  • 支持服务段渲染
  • 遵循单项数据流或者数据绑定
  • 使用可重复/可组合的UI组件开发视图

    3.什么是JSX?

    JSX是ECMAScript一个类似ML的语法扩展。基本上，他只是为了React.createElement()函数提供语法糖，从而让在我们在JavaSctipy中，使用类HTML模板的语法，进行页面描述。
    在下面的示例中，

    内的文本标签会作为JavaSctipt函数返回给渲染函数。
    1
    2
    3
    4
    5
    6
    7
    class App extends React.Component{
        return(){
            <div>
                <h1>{'Welcome to React world!'}</h1>
            </div>
        }
    }
    以上示例render方法中的jsx将会被转换为一下内容：
    1
    React.createElement("div", null, React.createElement("h1",null,"Welcome to React world!'));

    4.元素和组件有什么区别？

    一个Element是一个简单的对象，它描述了你希望在屏幕上以DOM节点或其他组件的形式呈现的内容。Elements在他们的属性中可以包含其他的Elements。创建一个React元素是很轻量的，一旦元素被创建后，它将不会被修改。
    React Element的对象表示如下:
    1
    2
    3
    4
    5
    const element = React.createElement(
        'div',
        {id: 'login-btn'},
        'Login'
    )
    上面的 React.createElement() 函数会返回一个对象。
    1
    <div id="login-btn'>Login</div>
    而一个组件可以用多种不同方式声明。它可以是一个含有render()方法的类，或者，在简单的情况中，它可以定义为函数。无论哪种情况，它都将props作为输入，并返回一个JSX树作为输出。
    1
    2
    const Button = ({ onLogin }) =>
        <div id={'login-btn'} onClick={onLogin} />
    然后JSX被转换成React.createElement()函数：
    1
    2
    3
    4
    5
    const Button = ({ onLogin }) => React.createElement(
        'div',
        {id: 'login-btn', onClick: onLogin },
        'Login'
    )

    5.如何在React中创建组件？

    有两种可行的方法来创建一个组件：
    i.Function Components:这是创建组件的最简单的方法，这些是纯JavaScript函数，接受props对象作为第一个参数并返回React元素：
    1
    2
    3
    function Greetion({ message }){
        return <h1>{'Hello, ${message}'}</h1>
    }
    ii.Class Components:你还可以使用ES6类来定义组件，上面的函数组件若使用ES6的类可改写为：
    1
    2
    3
    4
    5
    class Greetion extends React.Component{
        render(){
            return <h1>{'Hello, ${this.props.message}'}</h1>
        }
    }

    6.如何使用类组件和函数组件？

    如果组件需要使用状态或生命周期方法，那么使用类组件，否则使用函数组件。

    7.什么是Pure Components?

    React.PureComponent完全相同，只是它为你处理了shouldComponetUpdate()方法。当属性或者状态发生变化时，PureComponent将对属性和状态进行浅比较。另一方面，普通组件不会将当前的属性和状态与新的属性和状态进行比较，因此，在默认情况下，每当调用shouldComponetUpdate时，组件将重新渲染。

展开全文 >>

React Refs

React支持一种非常特殊的属性Ref,你可以用来绑定到render()输出的任何组件上。
这个特殊的属性允许你引用render()返回的相应的支撑实例(backing instance).这样就可以确保在任何事件总是拿到正确的实例。

使用方法

绑定一个ref属性到render的返回值上：

1
<input ref="myInput" />

在其他代码中，通过this.refs获取支撑实例：

1
2
3
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

你可以通过使用this来获取当前React组件，或使用ref来获取组件的引用，实例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class MyComponent extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  }
  render() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    );
  }
}
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

实例中，我们获取了输入框的支撑实例的引用，子点击按钮后输入框获取焦点。
我们也可以使用getDOMNode()方法获取DOM元素

展开全文 >>

React表单与事件

HTML表单元素与React中的其他DOM元素有所不同，因为表单元素生来就保留一些内部状态。
在HTML当中，想,