# React.js快速进坑 > **React** 用于构建 Web 和原生交互界面的库 。 ## 1. Vue.js 对比 React 都是构建UI的框架，但关注点不同： - Vue.js 对 HTML 进行了扩展。各种指令 - React 对 JavaScript 进行了扩展，新增一个语法-JSX **因此，Vue在构建页面上更便捷，而React在构建页面时可以使用全部的JS能力。** ## 2. 安装 > 与Vue.js一样，有CDN链接；也可以通过npm独立安装；当然也有对应的脚手架工具。 为了更快下载必要js文件，将CDN链接上的js下载本地。 - babel: 转译jsx语法，即将jsx 转换成 js对象（虚拟DOM） - React核心库：提供核心功能。比如如何定义组件，Hook等等 - React DOM库：提供与DOM相关的功能。比如 将React组件 渲染到页面中，输出信息... ### 2.1 Hello, world ```html Hello
``` ## 3. JSX > 形似 `

Hello, World.

`这样的语法，看着 既不是 HTML 标签， 也不是 JS中数据类型。它就是 `jsx`. ### 3.1 渲染数据 在React中，可以使用`{}`将一个JS表达式的值 绑定到 JSX 中。 ```jsx let username = 'guoguo'; // 在React中可以使用 "{}" 去 在jsx中渲染数据 // 在"{js表达式}"中，编写的是 JS表达式。类似与 Vue的插值语法"{{}}" let element =

Hello, {username}.

; //

Hello, daxia.

``` ### 3.2 绑定属性 > 在开发UI时，jsx的操作会像HTML标签那样去指定各种属性。 **由于 JSX 最终会被 babel 转译成 JS对象。因此JSX的属性命名规则要遵从JS规范。** - 不能使用js中关键字后者保留字 - 属性名字 推荐使用 驼峰命名法 camelCase 实现时注意以下几点： 1. 那些是关键字或保留字的HTML属性需要改名：for => htmlFor; class => className 2. 那些包含多个单词的HTML属性需要转换成驼峰命名：rowspan =>rowSpan; colspan => colSpan; ... 3. 剩下那些就无需改变，直接可以使用。 ```jsx // let element = ( //

// Hello, React. //

// ); /** *! 1. jsx元素必须闭合 *! 2. 在jsx中注释内容的话 需要使用 绑定语法 */ let element = (
{/* jsx元素必须闭合*/}
); ReactDOM.createRoot(document.getElementById('root')).render(element); ``` ## 4. 事件处理 > 所有UI界面都需要通过事件来完成交互的。 > > 不同与Vue，有v-on指令来处理事件，react是通过jsx相对应的事件属性来实现的 React在处理事件时，和原生DOM对象类似。可以通过对应事件相关属性来注册监听器。 不同的是： 1. 原生DOM事件属性 都是 全小写的；而React是 基于原生事件属性转换后的驼峰命名。 2. 原生DOM事件绑定的值类型为 string；而React JSX 事件绑定的值类型为 function。 ```html ``` ```jsx // React中的实现 function handleClick() { alert('你敢点我？？？'); } const element = ; ReactDOM.createRoot(document.querySelector('#root')).render(element); ``` ### 4.1 事件对象 > 在实际开发中，当某一事发生后开发者需要根据当前事件获取相关的信息数据。此时就需要找到事件对象。不同的事件，会创建不同事件对象，并且不同的事件对象包含的数据也不尽相同。 那么怎么获取 事件对象 呢？默认情况下，JSX中注册所有监听器函数都会接收一个 事件对象 作为 唯一入参。因此在需要时在事件监听器函数中定义形参接收即可。 ```jsx // 事件监听的第一个参数 就是 事件对象 function handleClick(e) { console.log(e); alert('你敢点我？？？'); } function handleChage(e) { // 每次文本改后将其打印出来 console.log('changed:', e.target.value); } function handleSubmit(e) { e.preventDefault(); // 取消默认行为 alert('submited.'); } const element = (
{/**1 点击事件 **/} {/**2 change事件 **/} {/* input元素的change事件 和原生的input事件 是一样的 */} {/**3 submit事件 **/}

这旮瘩是表单

); ``` ### 4.2 监听器中的this > 在React16之前，事件的监听器中this可能会被频繁使用。因此我们需要记住this的绑定值。 > > 但是在React18之后，即推出Hook之后，开发者就可以绕过 JS 中难以理解的this指向。 原生事件属性绑定的监听器中的this ```html ``` 但是在React中 监听器的this 与HTML属性注册事件是一样的，即监听器中的this不会绑定任何事。 ```html
``` 如果这些监听器函数中的this需要有一个有效值： ```html
``` ### 4.3 给监听器传入额外参数 默认监听器中只会接收一个参数，即事件对象。 如果想要传入额外参数，像这样 ```jsx function deleteListItem(e, id) { console.log(e, id); } let element = ( ); ReactDOM.createRoot(document.querySelector('#root')).render(element); ``` - bind函数的实现 会导致传入参数位置固定，不够灵活 - 自己套壳实现 可以自行传入参数，因此位置灵活 - 实际应用 都可以。 ## 5. 组件 > React组件更像是一个函数，返回组件最终渲染后的效果（UI）。这里函数的名字就是组件名。为了和其他普通函数区分，组件的名称 遵循 大坨峰命名法（PascalCase）。 ```jsx // 定义组件 function Greeting(){ return

大家，下午好。

} // 组件的渲染 let element = ; // 将组件 => jsx(React元素) ReactDOM.createRoot(document.querySelector('#root')).render(element); ``` ### 5.1 props 所有函数定义的组件 也都会接收一个唯一参数，即props。和Vue中一样，都是单向数据流。推荐数据是从父组件向其后代流动。 本质上 props 是一个 object对象。存储父组件给绑定的所有属性集合。 ```jsx function Parent(props) { console.log('parent', props); return (

谁是爹》

); } function Child(props) { console.log('child', props); return (
这是儿子,它叫 {props.name}。今年 {props.age} 岁。
); } let element = ; // 将组件 => jsx(React元素) ReactDOM.createRoot(document.querySelector('#root')).render(element); ``` props 是 组件与外部数据交互的接口。同时还是响应式，即当props中数据发生变化后，组件会及时重新渲染。 ==注意：props 是 "只读的"!，当在使用props的时候，虽然语法上是可以修改其属性，但是React会检查该操作，一旦发现就会抛出一个类型异常： Uncaught TypeError: Cannot assign to read only property 'age' of object。== ### 5.2 state state 是 组件内部自己拥有的状态数据。不同于 props ，props 是 只读的，但是 state 是可以修改的。同时state变化后，组件会重新渲染。 如果想要组件内部拥有状态state，在不使用hooks时，必须通过es6中的类来定义组件，这样在类组件渲染时，会创建组件实例。通过组件实例的state属性 去存储 所有内部的状态（state类型为object对象）。 其中，类名就是组件名，也遵循PascalCase命名法。 ```jsx // 定义类Greeting 继承自 React.Component // 此时，即为Greeting 组件 class Greeting extends React.Component { // 定义render实例方法 render() { return (

你好，兄弟！

); } } ``` 上述代码要求： 1. 类必须继承`React.Component`才会是组件 2. 必须含有render实例方法，用来返回组件最终渲染效果UI 接下来，看一个计数器案例： ```jsx class Counter extends React.Component { // 添加状态 state = { name: '计数器', count: 0, // 定义一个计数的状态值 }; reduceOne() { // console.log(this); // 类Vue，如果直接修改state可以吗？ // this.state.count--;// wrong // 正确做法 this.setState({ count: this.state.count - 1, }); } addOne = () => { // console.log(this); this.setState({ count: this.state.count + 1, }); }; render() { // 1 在类组件中 通过this先拿到组件实例，然后通过访问state属性得到所有的状态。 return (

{this.state.name}

当前值：{this.state.count}

); } } ``` 上面代码小结： 1. 获取状态state：通过 `this`先拿到组件实例；再访问state属性获取到所有的状态。 2. 修改状态state：必须通过组件实例的`setState方法`才可以。 3. `setState(newState | (prevState, props) => newState)`该方法在修改状态时，会将旧的state与setState传入新的state合并后产生的新状态对象 替换 旧状态对象的方式来实现响应式的。因此在调用setState时，要么直接传入一个新的状态对象，或者传入一个函数，该回调函数返回一个新state对象。 ### 5.3 组件生命周期 #### 5.3.1 脚手架 > 使用React对应脚手架工具==Creat-React-App（CRA）==来搭建一个React单页应用程序的开发环境。 ```bash npx create-react-app first-react-demo ``` 该项目中的`package.json`文件中包含以下几个NPM脚本： 1. npm start：Starts the development server. 2. npm run build：Bundles the app into static files for production. 3. npm test：Starts the test runner. 4. npm run eject：Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! #### 5.3.2 时钟案例 分析实现过程： 1. 基于组件系统。我们去实现一个时钟组件--Clock。 2. Clock组件 是 函数组件 亦或是 类组件？ 该组件需要一个当前时间的数据。并且该数据会每隔一秒发生变化。因此该数据是变化的，可能就不是props。这样就确定Clock是一个类组件。 *业务上来看，时钟就应该包含有一个自身需要维护的时间数据！* 3. 实现Clock组件的静态版本 4. 添加state数据， 5. 开启一个定时器，每隔一秒后修改state。此时需要ComponentDidMount生命周期钩子 6. 在组件卸载前清除定时器 ```jsx import { Component } from 'react'; import './Clock.css'; class Clock extends Component { // 添加state state = { now: new Date(), }; // 组件挂载后，开启定时器 componentDidMount() { this.timer = setInterval(() => { this.setState({ now: new Date(), }); }, 1000); } // 组件更新后 componentDidUpdate() { console.log(new Date()); } // 组件卸载前 componentWillUnmount() { clearInterval(this.timer); } // 必须实现 render. 也是生命周期钩子；对应constructor也是 render() { return (
当前时间为: {this.state.now.toLocaleString()}
); } } export default Clock; ``` ## 6. 条件渲染 > 不同于Vue，React没有指令，需要开发者自己手动通过原生JS来实现。 实现时通常会用到下面语句或者表达式： - `if`语句 或者 `switch`语句 - `?:`三目运算符 - `&&` 逻辑与 ```jsx // props.user = {name: 'daxia'} export function Greeting({ user }) { //! 1 if语句的实现 // let element; // 元素变量：根据不同条件存储不同的jsx元素 // if (user && user.name) { // element =

你好，{user.name}。

; // } else { // element =

你好，访客。

; // } // return element; //! 2 ？：三目运算符 // return user && user.name ? ( //

你好，{user.name}。

// ) : ( //

你好，访客。

// ); //! 3 逻辑与&& let element =

你好，访客。

; user?.name && (element =

你好，{user.name}。

); return element; } ``` ## 7. 列表渲染 ### 7.1 JS各种循环 1. while 2. Do-while 3. for 4. Array.forEach() ```jsx function SomeLoop() { var str = ''; var arr = [1, 2, 3]; // var i = 0; // var l = arr.length; // while (i < l) { // str += arr[i] + ','; // i++; // } // for (var i = 0, l = arr.length; i < l; i++) { // str += arr[i] + ','; // } //! 数组的forEach方法 可以遍历数组每一个元素，但是无法终止（除非是自然停止） //! 当每遍历到一个元素时，都会执行传入的回调函数，并且将当前元素值，索引值，以及遍历的数组对象作为参数传入进去。 arr.forEach((v, i, arr) => { str += v + ','; }); return
Some Loop Case@@{str.slice(0, str.length - 1)}
; } export default SomeLoop; ``` ### 7.2 数组map方法 **`map()`** 方法**创建一个新数组**，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。 ```js const array1 = [1, 4, 9, 16]; // Pass a function to map const map1 = array1.map((x) => x * 2); console.log(map1); ``` ### 7.3 列表渲染 在React中没有指令，只能开发者自己使用数组的forEach或者map或者for循环等方式来实现列表的渲染。 ```jsx class ListRender extends Component { state = { list: [1, 2, 3, 4, 5, 6], }; renderList() { let result = []; let list = this.state.list; // var i = 0; // var l = list.length; // for (; i < l; i++) { // result.push(
  • {list[i]}
    • ); // } list.forEach((d, i) => { result.push(
  • {d}
    • ); }); return result; } render() { return ( ); } } ``` ## 8. Hooks > Hook 译为 『钩子』。因此 Hooks 就是 钩住 react 特性的意思。 > > 在 React16.8 之后引入Hooks。可以使函数组件 像类组件那样 拥有自身状态以及生命周期等特性。 > > 本质上，这些Hook都是具有一定功能特性的函数。 ### 8.1 useState > `useState` is a React Hook that lets you add a [state variable](https://react.docschina.org/learn/state-a-components-memory) to your component. > > useState 是一个 React Hook，可以让开发者在函数组件中添加状态变量。 ```react const [state, setState] = useState(initialState); ``` 调用useState时，需要传入一个 初始状态值。返回 一个 数组值。数组中第一个元素为状态变量；第二个元素是修改状态变量的函数。当该函数调用时会修改状态，同时会更新组件。 ```jsx import { useState } from 'react'; function TestUseState() { let [name, setName] = useState('daxia'); // 姓名 // hooks都可以多次调用 let [age] = useState(18); // 年龄 return (

    你好，{name}。这小子今年 {age} 岁。

    ); } export default TestUseState; ``` 在useState传入的参数`initialState` 可以 是一个 函数，返回初始状态值。 比如，在需要一定计算量才能得出某状态变量的初始值时，可以将一个函数传入给 `initialState`。 同时，要注意修改状态的函数 与 类组件的setState方法 实现不完全一样。该修改函数 会 直接将新状态 替换 旧的状态。而不是像setState那样 先 合并旧状态 在替换。 因此在对象类型的状态修改时，要小心丢失某些状态对象 的 属性。 ```jsx function TestUseState() { let [user, setUser] = useState({ name: 'daxia', age: 18, }); return (

    你好，{user.name}。这小子今年 {user.age} 岁。

    ); } ``` 另外，所有状态变量的修改函数 在修改状态时可能是异步的。因此在修改函数中 直接获取状态 用作上一次状态的值 可能是错误的 ```jsx import { useState } from 'react'; export default function Counter() { let [count, setCount] = useState(0); function addOne() { setCount(count + 1); } function reduceOne() { setCount(count - 1); } return (

    计数器

    值为：{count}

    ); } ``` 上面 +3 按钮会失效。因此在连续调用setCount时参数count每一次都是0，也就是说 你调用三次`setCount(1)`。 为了 能够在异步更新状态时准确获取到上一次状态，可以给所有修改函数传入一个 函数类型值，它可以接收两个参数：上一个状态值preState，以及组件属性props，然后该函数返回新状态。 上面代码中，将setCount调用方式改为如下即可： ```jsx setCount((preCount) => preCount + 1); setCount((preCount) => preCount + 1); setCount((preCount) => preCount + 1); ``` **小结** 1. hook函数必须在函数组件中使用 2. hook函数必须组件顶层中调用，不能在其他语句中使用 3. useState中返回的修改函数 可能是异步修改状态 ### 8.2 useEffect > Effect 译为 『副作用』。 > > useEffect hook 就是在函数组件中执行副作用（和渲染无关）。 > > useEffect是一个React Hook，可以让你将一个组件与外部系统同步。 > > 其本质，就是用来实现一些生命周期的钩子。 那么，useEffect 能帮助开发者实现那些生命周期钩子的效果呢？ 1. 每一次组件渲染时，都希望执行一些副作用 ```jsx useEffect(() => { // 编写一些副作用代码。注意： 别随意修改状态 // 组件每次渲染 都会执行 }) ``` 2. 仅当组件首次渲染后执行一些副作用 ```jsx useEffect(() => { // 仅会在组件首次渲染后执行一次，可以在这里发送http请求 // 模拟的就是componentDidMount钩子 console.log('===组件渲染后==='); }, []); ``` 3. 在组件卸载前执行一些副作用 ```jsx useEffect(() => { // 返回一个回调函数 return () => { // 这里返回的回调 会在组件卸载前执行 // 可以在这里清除一些『垃圾』 console.log('MsgItem卸载了'); }; }, []); ``` 4. 监听state或者props，只要有一发生变化就会执行一些副作用 ```jsx ``` ### 8.3 useMemo ### 8.4 useCallback ## 9. refs & dom