React学习

React基础

1.React是什么   特点

        是一个用于构建用户界面的 JavaScript 库，如果从 MVC 的角度来看React 仅仅是视图层 (V)，也就是只负责视图的渲染 而并非提供了完整的 (M) 和 (C) 的功能

        特点：声明式（React 负责渲染 UI，并在数据变化时更新 UI ）、基于组件（组合、复用多个组件，可以实现完整的页面功能 ）、学习一次，随处使用（使用 React 可以开发 Web 应用 、可以开发移动端原生应用 react-native 、可以开发 VR（虚拟现实）应用 react 360 ）

脚手架（https://create-react-app.dev/docs/getting-started ）

 命令：

// 安装脚手架 
npx create-react-app 项目名称
// 切换到项目文件夹
cd 项目名称
// 启动项目
npm start 

npx : npm v5.2.0 引入的一条命令, 目的是提升包内提供的命令行工具的使用体验，无需安装脚手架包，就可以直接使用这个包提供的命令

1. React.createElement() 方法用于创建 react 元素

2. ReactDOM.render() 方法负责渲染 react元素到页面中

 JSX：JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码

注意事项：

1. React 元素的属性名使用驼峰命名法
2. 特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex
3. 没有子节点的 React 元素可以用 /> 结束
4. jsx 语法必须有一个根元素
5. 使用小括号包裹 JSX ，从而避免 JS 中的自动插入分号陷阱

const p = (<div>
	<p className="box">我在等风，也在等你呀哈</p>
    <input value="Tom" />
</div>)

JSX 中使用 JS 表达式注意事项：

1. 单大括号中可以使用任意的 JavaScript 表达式

2. JSX 自身也是 JS 表达式

3. 注意：JS 中的对象是一个例外，一般只会出现在 style 属性中

4. 注意：不能在 {} 中出现语句（比如：if/for 等）

 

// 声明一个函数
function handle() {
  return 1
}

// jsx 创建的元素也是表达式
const span = <span>Tom</span>

// 2. 创建元素
const p = (
  <div>
    <p>{1 + 1}</p>
    <p>{2 > 1 ? '大于' : '小于'}</p>
    <p>{handle()}</p>
    <p>{span}</p>

    {/* 不能在 `{}` 中出现语句（比如：`if/for` 等） */}
    {/* <p>{ if (true) {} }</p> */}
  
    {/* `JS` 中的对象是一个例外，一般只会出现在 `style` 属性中 */}
    {/* <p>{{ 1 }}</p> */}
  </div>
)

条件渲染

const isLoading = false


// if/else
const loadData = () => {
  if (isLoading) {
	return <div>loading...</div>
  }
  return <div>数据加载完成，此处显示加载后的数据</div>
}

// 三元表达式
const loadData = () => {
  return isLoading ? (<div>loading...</div>) : (<div>数据加载完成</div>)
}

// 逻辑与运算符
const loadData = () => {
  return isLoading && (<div>loading...</div>)
}


const title = (
  <h1>
    条件渲染：
    {loadData()}
  </h1>
)

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

列表渲染

1. 如果要渲染一组数据，应该使用数组的 map() 方法

2. 注意：渲染列表时应该添加 key 属性，key 属性的值要保证唯一

3. 原则：map() 遍历谁，就给谁添加 key 属性

4. 注意：尽量避免使用索引号作为 key

// 歌曲列表：
const heros = [
  {id: 1, name: '妲己'},
  {id: 2, name: '百里玄策'},
  {id: 3, name: '亚瑟'},
]

const list = (
  <ul>
    {heros.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
)

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

JSX样式处理

// 行内式 以及 类名

// style
<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
  JSX的样式处理
</h1>

// className
<h1 className="title">
  JSX的样式处理
</h1>