React（02）：React基础语法及核心的概念

前言

接着前一篇继续学习React，这一篇主要来看react的基本语法及核心的概念；
对比熟悉的vue语法，先列个提纲：

• react特有的语法
• 组件及组件之间的传值
• 生命周期
• 事件处理，事件绑定（v-bind/v-on)
• 条件渲染 (v-if/v-show)
• 循环渲染列表&key (v-for :key)
• 表单双向绑定 (v-model)

正文

一、React基础语法

1.1 思维导图

基本的语法请直接查看官网链接学习：react中文网，特殊的语法会在之后单独解析。

1. jsx及渲染： React中的JSX语法

2. 组件化&Props ： React中的组件化及父子组件间的传值

3. state及生命周期

• state 组件私有参数，只读，如果要修改要使用 this.setState({'参数的key'：'修改的新值'})；
• setState 只在合成事件和钩子函数中是“异步”的，在原生事件【比如在componentDidMount中给dom挂载事件】和 setTimeout 中都是同步的。（简单来说react在同一事件循环中的才是异步，不在同一事件循环中就是同步的）
• this.setState参数可以是对象或者函数，因为更新状态可能是异步的，所以不能依赖上一个值去改变下一个值，而是传递一个函数去改变值；

  //错误
  this.setState({
   
    counter: this.state.counter + this.props.increment,
  });
  //正确
  this.setState((state, props) => ({
   
    counter: state.counter + props.increment
  }));

4. 生命周期

  //组件第一次被渲染到 DOM 中-注册
  componentDidMount() {
   }
  //当 DOM 中的组件被删除的时候-卸载
  componentWillUnmount() {
   }

5. 事件处理

• 驼峰命名，onclick="test()"=>onClick={test()}
• 改变this指向的三种方法；
• 不能通过返回 false 的方式阻止默认行为，而是用e.preventDefault();

6. 条件渲染

• 在函数中判断
• 在reader()中写jsx去判断
• 三元表达式
• 如果想能隐藏组件，即使它已经被其他组件渲染。你也可以让 render 方法直接返回 null，就不进行任何渲染。

7. 列表& key

• map返回多个数组，用jsx语法去渲染，
• React中的key 和vue循环中的key作用相同，帮助识别哪些元素改变了，比如被添加或删除&#