react 整理

一、关于state
1、不能直接修改state,而是使用setState方法。
2、state的更新不是同步的，在同一个方法内设置之后，马上调用是拿不到更新后的值的。
例如：

//默认this.state.counter的值为1；
//这时我们通过调用this.setState()方法来设置counter值
this.setState({
    counnter:2
});
//当我们在同一个方法内部调用this.state.couter时
console.log(this.state.counter);  //这时的值为1复制代码

在计算state的时候，不能依赖state里面的值,这样可能会拿不到更新后的counter
例如

//错误的示范
this.setState({
    counter:this.stete.counter+this.props.increment
})复制代码

为了避免这样的情况出现，可以使用this.setState()的第二种方式

//正确的写法
this.setState((preveState,props)=>{
    counter:preveState.counter+props.increment
})复制代码

3、state更新是将你提供的对象合并到当前状态的

this.state={
    name:'linda',
    gender:'女'，
    age:'12'
}
//更新age这个状态
this.setState({
    age:'13'
})
//当下次调用this.state时，可以看到
console.log(this.state);
//{
//    name:'linda',
//    gender:'女'，
//    age:'13'
//}复制代码

4、当在标签中，需要使用state来存值的时候，是需要是在函数中设置值的。

state={
    value:undefined
}
handleChange(e){
    this.setState({
        value:e.target.value
    })
}
//render()方法里
<input type='text' onChange={this.handleChange} value={this.state.value} />
//当在input输入框设置value为this.state.value时，如果没有在handleChange方法里面设置stated的值，那么input将无法操作。复制代码

二、处理事件
1、阻止默认事件
在react中是不能通过返回false来阻止默认事件的。
例如 防止打开新页面的默认链接行为

<a herf='#' onclick='console.log('The link was clicked');return false'>
    click me!
</a>复制代码

但是在react中,应该

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();//阻止默认事件
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}复制代码

三、render组件
在render组件，使用map()方法来渲染一个列表。这时候就需要给每一条数据给一个唯一的key值

function Number(props){
    return <li>{props.value}</li>
}
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    //在这个数组中的每个key值都应该是唯一的。
    <ListItem key={number.toString()}  value={number}/>
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);复制代码

需要注意的是，这个key值是必须要放在map()方法里面的。

转载于:https://juejin.im/post/59f976036fb9a0451170722f