React基本使用

2019-03-08

React

React基本使用

内容来自React 官方Tutorial，由于中文文档很多翻译错误（深浅拷贝都分不清楚）和部分翻译缺失，所以自己读了英文文档做了些笔记。

React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。

组件

React 的组件，都继承自React.Component 。

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

//使用方法：<ShoppingList name='QE'>

子组件通过props对象获得父组件的数据
父组件通过状态提升获得其子组件数据（感觉还是通过props实现的，）
通过render返回一个嵌套的视图

React使用一种叫JSX的语法扩展，主要功能就是可以直接嵌入类似html模板的代码进js代码里，原理相当于编译成这样：

return React.createElement('div', 
  {className: 'shopping-list'},
  React.createElement('h1', /* h1 children */),
  React.createElement('ul', /* ul children */)
);

在使用 JavaScript classes 时，你必须调用 super(); 方法才能在继承父类的子类中正确获取到类型的 this 。所以如果一个组件有构造函数，一定要先调用super();

一个constructor示例：

//接收父组件传入的props入参
constructor(props) {
    super(props);
    this.state = {
        //只有在构造函数才允许对state直接赋值
        x = 1,
    };
}

使用this.state来为组件设置自身状态（注意只能用setState进行状态变化）
父组件定义的方法即使被子组件调用，其this也是父组件，暂时还不知道为什么，推测是jsx编译后调用仍然是从父组件调用或者用了call
slice()没有参数直接创建数组的深拷贝
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
在React中，建议使用不可变对象（其实不是使用不可变，而是当成不可变对象使用，创建新对象再对原引用重新赋值），因为这样可以方便React检测变化，即时重新渲染，因为this.setState()才能触发检测重新渲染，而直接this.state.vv='newvalue'难以用异步方式检测到变化，只能刷新页面才行。
String.contat()返回新对象而不是原对象，所以React很喜欢它
检测到组建的state变化,render()就会重新执行，所以在render()里写的字符串拼接可以重复执行。

函数组件

函数组件是一种更加简便的写组件方式（当组件只有一个render，不含有自己的state时）

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

函数组建不要用this，直接Props就完事了，推测React可能是用闭包实现的

Key

key是一个react中一个特殊的属性，告诉react每个组件的identity。

<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>

key是react中特殊处理的属性，不能在props中被找到，react自动存储key，并用key决定哪些组建需要重新渲染，组件自己无法获取到自己的key。

强烈建议在渲染列表项时添加key值，如果没有，会产生警告并使用默认数组索引作为key，会加大渲染的开销，所以请用key。

npm使用 webpack学习笔记