JSX语法

在react中，在js文件里写html标签，我们把这种语法称为 jsx语法。

jsx语法与普通js语法的区别

• 普通js语法，我们如果想要渲染一段html文本的话，是通过返回一段字符串实现
  image.png

• jsx语法中除了正常的html标签外，还可以使用我们自己创建的组件，但是组件要以标签的形式使用；当我们使用自定义组件时，需要注意的是，首字母要大写，否则无法渲染。

  
  image.png
• 所以在jsx语法中，当一个标签首字母是大写的时候，我们应该明白，这是一个组件。如果是小写的，一般是原始的H5标签。

jsx语法要求，一个组件，render函数return出来的内容，外层必须要有一个包裹元素。比如

class TodoList extends Component {
    render(){
        return (
            <div>
                <div><input></input><button>提交</button></div>
                <ul>
                    <li>英文</li>
                    <li>数学</li>
                </ul>
            </div>
        )
    }
}

• 如果我们既要满足这个条件，又不想真的在页面上渲染出这个元素的话，react16提供了一个占位符 Fragment.使用之前，需要先引入

import React, {Component,Fragment} from "react";
class TodoList extends Component {
    render(){
        return (
            <Fragment>
                <div><input></input><button>提交</button></div>
                <ul>
                    <li>英文</li>
                    <li>数学</li>
                </ul>
            </Fragment>
        )
    }
}

如何在JSX语法中写注释

image.png

React的JSX里，当我们给元素或组件设置样式类名的时候，不要使用class这个单词，要使用className来设置类名。这么做的原因是react认为class是一个类，为避免混淆，才用className这种写法来定义样式。

image.png

JSX里展示的内容，默认是被转译的，如果我们希望做不转译的展示，就要借助dangerouslySetInnerHTML

• 转译后的

  
  image.png
• 设置dangerouslySetInnerHTML，未转译的
  两层大括号，外层标示是一个JS表达式，内层标示是一个JS对象
  image.png
  image.png

for的使用

• label标签，通常用来扩大input的点击区域，当它的for属性，跟input的id属性一致时，就可以实现点击label实现input框的聚焦。但是如果我们在JSX语法中直接给label用for,就会跟render函数的for循环产生歧义。此时控制台会报warning
  image.png
  image.png
• 这个时候，我们可以使用htmlFor代替for
  image.png

render函数里，返回的JSX如果逻比较复杂，可以把逻辑写入一个方法

• 修改前，如果逻辑和复杂，这一块看起来就会不清晰。

  
  image.png

• 把逻辑写入一个函数，然后在render里调用函数就行了。这种写法，会让我们的JSX语法体积不会过于庞大，维护起来更方便

  
  image.png

• 新版react里，setState方法的使用，之前我们是在setState里直接接收一个对象，现在我们可以在setState方法里传一个函数

  
  image.png

• 如果这个过程中报错，可以把值在setState外部做一个保存，在去通过setState修改值

  
  image.png
• setState方法，可以接受一个参数prevState,用来代替 this.state,这种写法更靠谱，主要是为了避免不小心改变state的状态。
  image.png

• render函数渲染的元素，key值，应该是在最外层的元素上。

  
  image.png