JS 笔记

ES5

1
2
3
4
5
6
7
8
9
class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('click'); }}>
        {this.props.value}
      </button>
    );
  }
}

ES6

1
2
3
4
5
6
7
8
9
class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('click')}>
       {this.props.value}
     </button>
   );
 }
}

注意:此处使用了 onClick={() => alert(‘click’)} 的方式向 onClick 这个 prop 传入一个函数。 React 将在单击时调用此函数。但很多人经常忘记编写 () =>,而写成了 onClick={alert(‘click’)},这种常见的错误会导致每次这个组件渲染的时候都会触发弹出框。

state

1
2
3
4
5
6
<button 
        className="square" 
        onClick={ () => this.state.value = "x" } > 
        //不好使,需要通过 setState()
        {this.state.value} 
</button>

构造函数

子类定义构造函数时,需要调用 super

1
2
3
4
5
6
super([arguments]); 
// 调用 父对象/父类 的构造函数

super.functionOnParent([arguments]); 
// 调用 父对象/父类 上的方法

状态提升

父组件向子组件传值

1
2
3
4
5
handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    this.setState({squares: squares});
  }

子组件 被点击时,通知父组件,哪个子组件被点击,即 handleClick(i) 传入变量 i

1
2
3
4
arr.slice(start,end)
arr.slice(); // 相当于整个全部截取出来
arr.slice(1); // 截取出 从索引 1 到 结尾

不可变数据

不可变数据结构(immutable data)

浅拷贝、深拷贝

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
function clone(obj) {
  // 类型判断。 isActiveClone 用来防止重复 clone,效率问题。
  if (obj === null || typeof obj !== 'object' || 'isActiveClone' in obj) {
    return obj;
  }

  //可能是 Date 对象
  const result = obj instanceof Date ? new Date(obj) : {};
//此处 兼顾了 普通对象 和 数组 的遍历
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      obj['isActiveClone'] = null;
      result[key] = clone(obj[key]);
      delete obj['isActiveClone'];
    }
  }

  return result;
}

函数式编程