# 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. 组件 ### 5.1 props ### 5.2 state ### 5.3 组件生命周期 ## 6. 条件渲染 ## 7. 列表渲染 ### 7.1 JS各种循环 ### 7.2 数组map方法 ## 8. Hooks ### 8.1 useState ### 8.2 useEffect ### 8.3 useMemo ### 8.4 useCallback ## 9. refs & dom