React的小知识点

# react类中变量的定义

react中的类,如果需要定义变量,直接v1=xxxx;即可. react中的类与js中的对象一样，可以不必先定义，直接赋值即可。

不可以var v=xxx;或者const v = xxx;

Class XX extends React.component{

    v1 = 56;

    myFunction(){

        this.v2 = 77;

    }

}

#react中如何阻止html的默认事件（原生js中也差不多）

handleClick(e){
　　console.log(e);
　　e.preventDefault();
　　console.log("end");
}

//渲染方法
render () {
　　return(
　　　　<div className="login">
　　　　<a href="http://www.baidu.com" onClick={(e)=>this.handleClick(e)}>链接</a>
　　　　<div className="header">

...

...

# &&语法

react

<div>{length > 0 && <a>link</a>}</div>

下文抄自reactjs.org

It works because in JavaScript, true && expression always evaluates to expression, andfalse && expression always evaluates to false.

Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.

# state更新是异步的

react的state赋值是异步的。因此这样的语句可能存在风险。this.state({age:this.state.age+1});

正确的做法是：this.state((preState=>({age:preState.age+1}));

下段抄自：https://www.2cto.com/kf/201706/651943.html

　调用setState，组件的state并不会立即改变，setState只是把要修改的状态放入一个队列中，React会优化真正的执行时机，并且React会出于性能原因，可能会将多次setState的状态修改合并成一次状态修改。所以不要依赖当前的State，计算下个State。当真正执行状态修改时，依赖的this.state并不能保证是最新的State，因为React会把多次State的修改合并成一次，这时，this.state将还是这几次State修改前的State。另外需要注意的事，同样不能依赖当前的Props计算下个状态，因为Props一般也是从父组件的State中获取，依然无法确定在组件状态更新时的值。

举个例子，对于一个电商类应用，在我们的购物车中，当我们点击一次购买数量按钮，购买的数量就会加1，如果我们连续点击了两次按钮，就会连续调用两次this.setState({quantity: this.state.quantity + 1})，在React合并多次修改为一次的情况下，相当于等价执行了如下代码：

Object.assign(

  previousState,

  {quantity: this.state.quantity + 1},

  {quantity: this.state.quantity + 1}

)

于是乎，后面的操作覆盖掉了前面的操作，最终购买的数量只增加了1个。

如果你真的有这样的需求，可以使用另一个接收一个函数作为参数的setState，这个函数有两个参数，第一个是当前最新状态（本次组件状态修改后的状态）的前一个状态preState（本次组件状态修改前的状态），第二个参数是当前最新的属性props。如下所示：

// 正确

this.setState((preState, props) => {

  counter: preState.quantity + 1;

})

#布尔值、Null 和 Undefined 被忽略

false、null、undefined 和 true 都是有效的子代，但它们不会直接被渲染。下面的表达式是等价的：

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

　　

# children可以是函数，抄自官方网站文档

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

　

# XXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXX

XXXXXXXXXXXXXX

　

# XXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXX

XXXXXXXXXXXXXX

　

# XXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXX

XXXXXXXXXXXXXX

　

# XXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXX

XXXXXXXXXXXXXX

　

# XXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXX

XXXXXXXXXXXXXX

　

# XXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXX

XXXXXXXXXXXXXX

　

# XXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXX

XXXXXXXXXXXXXX

　

# XXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXX

XXXXXXXXXXXXXX