珠峰培训，专注前端

一、React 是什么？

React 是一个由 facebook 开源的 前端框架，核心专注于视图，目的是实现组件化开发；

  • 组件化的概念

我们可以很直观的将有一个复杂的页面分割成若干个独立的组件，每个组件包含自己的 html 结构、样式和js逻辑，然后再将这些组件组合，即可完成一个复杂的页面。这样既减少了逻辑的复杂度，又实现了代码的重用；

  • 组件化的优势：
  1. 可组合：一个组件可以和其他组件一起使用或者可以直接嵌套在另一个组件内部
  2. 可重用：每个组件都具有独立的功能，他可以被使用在多个场景中
  3. 可维护：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护

二、 配置 React 的开发环境

  1. 安装 react 的脚手架 create-react-app ：
  1. npm install create-react-app -g
  1. 使用 react 脚手架初始化一个项目：create-react-app 项目名，例如 :
  1. create-react-app first-app
  1. 等待依赖安装完成，然后执行:
  1. cd first-app
  2. npm start

三、React 的组成部分

react由两部分组成：

  1. react.js 是 React 的核心库
  2. react-dom.js 是提供与 DOM 相关的功能，会在 window 下增加 ReactDOM 属性；其中常用的是 render 方法，render 可以将 react 元素或者组件插入到页面中；

四、jsx 语法

4.1 什么是 jsx 语法

jsx 语法是一种 js 和 HTML 混写的语法，将组件的结构，数据甚至样式都聚合在一起定义组件，最终经过编译形成普通的 javascript；

在 jsx 中，长得像 HTML 元素的就是 react 元素，React 使用 jsx 语法开发，学习 React 需要掌握 jsx 语法；

jsx 可以写在 js 文件中，也可以新建 .jsx 文件；但是在 js 文件中需要导入 React

  1. import React from 'react'
  3. // 导入 React 之后才能开始写 jsx 语法

4.2 jsx 示例

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  4. let data = {
  5.     name: '马宾',
  6.     age: 18
  7. };
  9. let h = <h1 id="xyz">姓名：{ data.name }, 年龄：{ data.age }</h1>; // 这个 h 就是一个 react 元素，也可以成jsx元素，这个元素是虚拟DOM（js对象）
  11. // 把 react 元素渲染到页面中
  12. ReactDOM.render(h, document.querySelector('#root'), () => {
  13.     console.log('100');
  14.     console.log(document.getElementById('xyz'))
  15. });

4.3 使用 jsx 的注意事项

  1. JSX 元素需要放到 ReactDOM.render() 函数中，且最外层只能有一个根节点；
  2. 需要注意 jsx 是js，写 jsx 需注意遵守 js 的语法；
  3. jsx 元素可以通过 { } 来使用表达式，注意只能是表达式，不允许写语句
  4. jsx 元素同样可以使用行内属性，但是 原来 html 行内的 class 属性，在 jsx 中有特殊意义，需要改成 className ；原有的 label 的 for 属性，需要改成 htmlFor ； style属性要写成对象的形式
  5. jsx 元素（react元素）并不是真正的 DOM，而是虚拟 DOM ，最终经过 babel 编译成普通js的对象；

示例：

  1. let d1 = <div className="x1">这是一个div { false ? 1 : 0 }</div>
  2. let d2 = (<div className={ false ? 'x1' : 'y1' }>
  3.     这是一个div
  4.     <p>这里面减值可以写一个html</p>
  5. </div>); // 如果换行用小括号包裹起来
  7. let d3 = <div style={{color: 'red', background: '#000'}}>11111<label htmlFor="name"><input type="text" defaultValue={data.name} id="name" /></label></div>;
  9. ReactDOM.render(d3, document.getElementById('root'));

4.4 ReactDOM.render() 渲染

  1. 在执行 render 时，先将jsx虚拟的 DOM 元素转换成真实的 DOM 元素
  2. 并且把当前真实的 DOM 插入到真实的DOM元素中
  3. 把DOM 渲染到真实的 DOM 之后，才会执行后面的回调函数，可以在这个函数中操作 DOM；

五、在 React 中使用样式

在 react 中使用样式，直接在 js 中通过 import 导入 css 样式；最终打包的时候，webpack 会帮我们把样式处理好；

5.1 示例

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  4. import './css/3-css.css' // 在 react 中使用样式，直接在 js 中通过 import 导入 css 样式
  5. let p1 = <p className="p1">这是一个p标签</p>; // 注意不能使用 class 指定元素类名，而应该使用 className 属性
  7. ReactDOM.render(p1, document.querySelector('#root'));

六、列表渲染和条件渲染

6.1 列表渲染

React 和 Vue 类似都是数据驱动的，都可以根据给定的数据生成一组 DOM 元素，或者根据数据的特定情况生成或者不生成 DOM 元素；在 Vue 中使用 v-for 指令，但是 React 没有指令系统，需要使用 数组的 map 方法，在 map方法的回调函数中返回要生成的 jsx 元素；

  • 示例：
  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  4. let ary = [
  5.     {
  6.         name: '马宾',
  7.         age: 18,
  8.         title: '宇宙集团军总司令'
  9.     },
  10.     {
  11.         name: '小飞',
  12.         age: 17,
  13.         title: '银河小魔仙'
  14.     }
  15. ];
  17. // 在 Vue 中使用 v-for，但是 React 中没有指令
  18. // 在 React 中使用列表渲染，需要使用 数组的 map 方法，在 map 方法的回调函数中返回要生成多个的元素；
  20. // 使用传统的匿名函数：
  21. let lis = ary.map(function (item, index) {
  22.     return <li key={index}>姓名：{item.name}；年龄：{item.age}；职务：{item.title}</li>
  23. }); // map 方法将原数组映射成一个新数组，
  25. console.log(lis); // 虚拟 DOM 数组
  26. let ul = (<ul>
  27.     {lis} {/*使用列表渲染出来的数据，在 html 里面使用需要使用 { lis }*/}
  28. </ul>);
  30. // 使用 箭头函数
  31. let ul2 = (<ol>
  32.     {
  33.         ary.map((item, index) => <li key={index}>name: {item.name}; age: {item.age}; title: {item.title}</li>)
  34.     }
  35. </ol>);
  37. ReactDOM.render(ul2, document.querySelector('#root'));

6.2 条件渲染

React 同样没有 v-if，但是需要条件渲染，就需要使用 if-else 等判断语句

  • 示例：
  1. let flag = Math.round(Math.random() * 10)
  3. let el;
  4. if (flag > 5) {
  5.     el = <h1>大于5</h1>
  6. } else {
  7.     el = <h1> 小于等于 5</h1>
  8. }

七、React.createElement

React.createElement() 方法是用来创建虚拟 DOM 的方法，而 jsx 语法中，jsx 元素就是 createElement 方法的语法糖；

7.1 React.createElement(type, props, …children) 参数

  • type: 标签类型
  • props: 行内属性，对象数据类型
  • children： 从第三个参数开始都是 type 的子元素

7.2 示例：

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. let ele = (<h1 x="1" y="2">
  4.    hello
  5.    <span s="1">1</span>
  6.    <span>2</span>
  7. </h1>);
  8. let eleByCreateElement = React.createElement(
  9.    'h1',
  10.    {x: 1, y: 2},
  11.    'hello',
  12.    React.createElement('span', {s: 1}, 1),
  13.    React.createElement('span', null, 2)
  14. );
  15. // React.createElement(type, props, ...children)
  16. // type: 标签类型
  17. // props: 行内属性，对象数据类型
  18. // children： 从第三个参数开始都是 type 的子元素
  19. ReactDOM.render(eleByCreateElement, document.getElementById('root'));` javascript

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】