react入门学习

React 是什么？

一个用于构建用户界面的 JavaScript 库
中文手册：https://react.docschina.org/

命令式编程 和 声明式编程

• 告诉计算机怎么做（How） - 过程
• 告诉计算机我们要什么（What） - 结果

如何使用 React

基于浏览器的模式

• React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
  • React.createElement(type,props,children);
• ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
  • ReactDOM.render(element, container, callback)
    • element：要渲染的内容
    • container：要渲染的内容存放容器
    • callback：渲染后的回调函数 可选参数

babel

babel-standalone.js：在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js

JSX

JSX 是一个基于 JavaScript + XML 的一个扩展语法
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表达式一起使用

插值表达式

在 JSX 中可以使用 {表达式} 嵌入表达式

表达式：产生值的一组代码的集合

• 变量
• 算术运算
• 函数调用
• ……

注意：分清楚 表达式 与 语句 的区别，if、for、while 这些都是语句，JSX 不支持语句

各种类型内容在插值中的使用

• 注释
  {/注释/}
  {/*
  多行注释
  */}

输出数据类型

• 字符串、数字：原样输出
• 布尔值、空、未定义 会被忽略

列表渲染

• 数组
• 对象
  扩展：虚拟 DOM （virtualDOM） 和 diff

条件渲染

• 三元运算符
• 与或运算符

在属性上使用 表达式

JSX 中的表达式也可以使用在属性上，但是使用的时候需要注意

• 当在属性中使用 {} 的时候，不要使用引号包含

JSX 使用注意事项

• 必须有,且只有一个顶层的包含元素 - React.Fragment
• JSX 不是html，很多属性在编写时不一样
  • className
  • style
• 列表渲染时，必须有 key 值
• 在 jsx 所有标签必须闭合
• 组件的首字母一定大写，标签一定要小写