React理解 - 第二篇（React的基本语法）

React现下比较流行的一个框架，react的页面是由不同个数的组件组成的，组件有类组件和函数组件两种，主要以函数组件为例。

基础语法 JSX

组件返回值可能是由JS标签和其他组件组成JSX标签，使用JSX标签语法时需要注意一定要有一个共同的父组件，可以使用div，但推荐使用react自带的Fragment语法，大概如下：

// Fragment标签用法
<>
  <MyApp />
  <div>
    <p>hello world</p>
  </div>
</>

给组件命名时需要注意React组件需首字母大写，小写字母开头的组件，浏览器将会解析为HTML标签，可能会导致你的组件在浏览器中无法正常显示（不要问我为什么知道），组件的命名除了首字母需大写外，可以任意命名，建议按组件内容的意义来命名。

JSX语法通过babel将组件式的语法转化成JS，如下图

样式引用 className

在React组件中，CSS的类名与HTML中略有不同，不再使用class而是使用的className，然后在css、less等文件中添加样式即可，这部分与HTML相同，大概如下：

<MyApp className="isClassName" />

// 在css文件中
.isisClassName {
  color: #fff;
}

如果内嵌的话，可以使用大括号的形式引入，不止是样式，引用变量的时候，也可以使用大括号，如下

// 效果和上文方法结果相同
<MyApp src={user.name} style={{color: "#fff"}}/>

声明式编程

React是一款声明式的框架，其使用，大致上就是和JS相同，只是说他的返回值是JSX标签，其他的方法与JS类似，也可以使用map来循环生成标签，结构也和HTML很类似

状态 state

React中推出了一个state用来管理页面中数据的变化，通过和Hook中的useState一起来达成状态管理的目的。如下：

function MyApp() {
  // 此处的count为一个状态（state），count相当于具体的变量名
  // setCount为修改state值的方法，固定写法
  // 0为count的默认赋值 即初始值
  // 采用数组结构的形式
  const [count, setCount] = useState(0)
}

注意Hook只能在组件的最顶层使用，不要在条件或循环中使用useState

props

React中从父组件往子组件传递属性的方法是通过props来传递的，大概如下：

// MyApp即为父组件
function MyApp() {
  const [count, setCount] = useState
  function handleClick() {
    setCount(count + 1);
  }
  return ( 
    // MyChildren1、MyChildren2 则为MyApp的两个子组件
    // 在两个子组件中count的值是相同的 因为他们都是从父组件中获取的count（state）
    // 而这种在子组件中就修改到父组件的状态的方法就叫 状态提升
    <MyChildren1 count={count} onClick={handleClick} />
    <MyChildren2 count={count} onClick={handleClick} />
  )
}

// {count, onClick} = props 采用对象解构的形式得到props传递下来的属性值
function MyChildren1({count, onClick}) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

这就是大概的语法了，了解了这些就可以开始React的编写了