React笔记

2018-06-22

入门推荐

安装快速启动种子文件

1	npm install -g create-react-app

使用种子文件创建TypeScript类型的环境参考资料

1	create-react-app my-app --scripts-version=react-scripts-ts

使用vs code快速启动项目

code .

原生HTML元素以小写字母开头，自定义的react类名以大写字母开头

组件类只能包含一个顶层标签

React state

组件在constructor()通过设置this.state来初始化状态，通过与用户的交互，通过在方法中使用this.setState实现不同的状态切换，每次状态修改后会自动调用this.render来渲染组件.

React props

props与state的区别是props是不可变的，可以通过props来在组件间传递数据。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。通过getDefaultProps设置默认值。

安装antd
npm install antd

react定义组件的三种方式

参考链接

函数式定义的无状态组件

// 创建纯展示的组件，只根据传入的props来进行页面组件展示，不涉及到对state进行操作
function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode) 

const HelloComponent = (props) => {
  return (
    <div>Hello {props.name}</div>
  );
}

ES5定义支持的React.createclass
ES6支持的class: extend React.component

生命周期理解

生命周期主要分为三个状态：

Mounting:组件挂载，插入到真实dom，这个过程属于实例化期

组件挂载其实质是：将JSX =>JavaScript对象 => 真实Dom一系列转化的过程
Updating:组件根据不同的action进行页面的渲染（dom结构已存在，属于数据的刷新），这个过程属于生存期
Unmounting:组件卸载，移出真实dom,这个过程属于销毁期

生命周期函数理解

componentWillMount()：

componentWillMount()组件挂载前调用一次，此时组件还没有挂载（组件还没有插入dom文档）

这个地方我们是否可以用来进行相关权限的验证呢？？可以用来进行不涉及dom操作的相关操作，比如部分ajax数据获取

componentDidMount()组件已经挂载了（在页面已经生成了对应的dom结构），只在第一次渲染的时候调用，因此我们可以在这个函数里面发起http请求获取页面初始化的数据。

componentDidMount(){
   this.loadlists()
}
//封装发送请求的函数
loadlists(){
   ajax请求……
}
//页面执行相关操作，执行函数调用请求
refreshdata(){
   this.loadlists()
}

componentWillUnmount()：

组件被移除的时候会进入这个函数，但是是否进入这个生命周期貌似得取决于render()返回的是不是同一个组件。比如说如果点击的链接是指向（render）的同一个组件只是传递的参数不同，那么这个生命周期貌似不会进入。当切换路由指向（render）的是不同的组件那么该生命周期就会进入。

react 状态（state）不可变

 modalOnOk = () => {
const form = this.form;
form.validateFields((err: any, values: any) => {
  if (err) {
    return;
  }
  fetch('http://10.137.225.190:7001/api/v1/system/dictionaries', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body:JSON.stringify(values)
  })
    .then(function (response) {
      return response.json();
    })
    .then((json)=>{
      this.setState({
        treeData:this.state.treeData.concat([json]),
        tableData:this.state.tableData.concat([json])
      })
    })
    .catch(function (error) {
      console.log('error info:' + error);
    })
  form.resetFields();
  this.setState({
    modalVisible: false
  })
})}
这里不能使用this.state.treeData.push(json)。不能改变原来的state。concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

setState()的操作不是同步的，可以认为是异步的。是一次请求，但不是一次立即执行更新组件的操作。

官网说明：

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

翻译理解：

执行setState()操作后，并不总是立即更新组件。基于某些原因（渲染性能？）的考虑，react会对setState()进行批处理或者延迟更新，这样就使得我们掉入一个潜在的陷阱：调用setState()后立即获取this.state，得到的结果却还是旧值。

想要获取正确的state有两种方法：

在ComponentDidUpdate()生命周期或者render()方法中获取state
充分利用setState().

1	setState(updater[, callback]);

setState()有两个参数，第二个参数是可选的。第一个参数是一个对象，用来设置对象。第二个参数是一个可选的回调函数，它会在setState()执行完成且组件被重新渲染后执行。

this.setState({ data: data }, function() {
  // 这里就能获取到已经更改过的state了
  console.log(this.state.data);
  });

class中的constructor、super()

constructor()方法是ES6针对类的默认方法，该方法在类中必须要有,如果没有显示的定义该方法，那么会隐式的添加一个空的constructor()方法。

super()方法是用来为继承服务的。在class方法中，继承是通过extends关键字实现的，子类必须在constructor()中调用super()方法，否则新建实例会报错。

报错的原因：ES6的继承机制不同于ES5的继承机制。

ES6继承机制中，子类是没有自己的this对象的，他只能继承父类的this对象，然后对其进行加工。而super()就是将父类中的this对象继承给子类的，没有super，子类就得不到this对象。

ES5的继承中，先创建子类的实例对象this，然后再将父类的方法添加到this上(Parent.apply(this))。而ES6采用的是先创建父类的实例this，然后在子类中调用super()来继承父类的this对象，然后在子类的构造函数中修改this。

绑定this的方式

只要不是使用箭头函数的都需要显式的绑定this对象

bind()方式：

在标签上绑定

class UserAuthorFrom extends React.Component<FromProps, {}> {
  constructor(props: FromProps) {
    super(props);
  }

  handleClick (name, e) {
    console.log(name);
  }

  public render(): React.ReactNode {
    return (
      <div>
         <button onClick={this.handleClick.bind(this, '按钮')}>点击</button>
      </div>
    );
  }
}

注意这种绑定方式的参数传递

跟在this后面的参数才会实际成为你定义函数的参数。

在构造函数内绑定

class UserAuthorFrom extends React.Component<FromProps, {}> {
  constructor(props: FromProps) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick (e) {
    console.log(e);
  }

  public render(): React.ReactNode {
    return (
      <div>
         <button onClick={this.handleClick}>点击</button>
      </div>
    );
  }
}

在构造函数内绑定this的方式好处是，只需要绑定一次，避免每次渲染时都要重新绑定，函数复用时也无需再次绑定。

箭头函数绑定：

在标签内绑定

class UserAuthorFrom extends React.Component<FromProps, {}> {
  constructor(props: FromProps) {
    super(props);
  }

  handleClick (name, e) {
    console.log(name);
  }

  public render(): React.ReactNode {
    return (
      <div>
         <button onClick={ () =>{ this.handleClick.bind()}}>点击</button>
      </div>
    );
  }
}

在class内中绑定

class UserAuthorFrom extends React.Component<FromProps, {}> {
  constructor(props: FromProps) {
    super(props);
  }

  // 箭头函数写的匿名函数赋给变量handleClick
  handleClick = (e) => {
    console.log(name);
  }
  public render(): React.ReactNode {
    return (
      <div>
         <button onClick={ this.handleClick }>点击</button>
      </div>
    );
  }
}

[参考资料一]（https://blog.csdn.net/chjj0904/article/details/79291117）
[参考资料二]（https://blog.csdn.net/sinat_17775997/article/details/56839485）
[参考资料三]（https://blog.csdn.net/zt_pursue/article/details/79266464）