React_63实用知识库分享20231204211138.pdfVIP

React_63

目录

React_63

第1篇React-初体验

第2篇React-component

第3篇React-玩转事件处理state

第4篇React-setState

第5篇React-组件化开发思维模式

第6篇React-Hooks(useState)

第7篇React-Hooks(useMemo、useCallback)

第8篇React-Hooks（useReducer）

第9篇React-Hooks(useContent)

第10篇React-Hooks(useEffect)

第11篇React-Hooks(useRef)

第12篇React-hash

第13篇React-Router(NavLink、Redirect)

第1篇React-初体验

第1篇React-初体验

多了不说少了不唠，家人们，咱们直接开整

学习每一种语言或者框架之前，咱们都应该先来一个HelloWorld，那么现在咱们就来一个Hello

World，实现一共分为五步，我称它为React-五步走

第一步：引用React库

//

scriptsrc=./js/react.development.js/script

scriptsrc=./js/react-dom.development.js/script

第二步：准备一个容器（根节点）+和其他库配合使用

divid=app/div

第三步：创建元素（作为构建应用的最小单位）

varelement=h1helloworld/h1

第四步：通过ReactDOM.render()函数，将元素渲染到容器中

ReactDOM.render(element,document.getElementById(app))

到这里呢，咱们可以打开浏览器看一哈

第1页/共67页

第1篇React-初体验

页面渲染失败，报错，并没有显示helloworld，这是为什么呢？

因为script平时的工作就是解析JavaScript的，现在我们把HTML写在了script标签中，浏

览器一下也懵了，这是啥玩意儿啊，我也不认识啊；正所谓上有政策，下有对策，我们打开

babel的官网瞧一瞧

第2页/共67页

第1篇React-初体验

在试用中我们可以看到在侧边栏中有一项是react，也就是说babel能够解析react的jsx语

法，咱们刚刚书写的语法就是jsx语法（简单理解成：JavaScript+XML），但是这种语法规范

并不能被浏览器解析，所以我们需要用babel转成能被浏览器识别的js

第3页/共67页

第1篇React-初体验

第五步：将jsx转为js

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metahttp-equiv=X-UA-Compatiblecontent=IE=edge

metaname=viewportcontent=width=device-width,initial-scale=1.0

titleDocument/title

/head

body

divid=app/div

scriptsrc=./js/react-dom.development.js/script

scriptsrc=./js/react.development.js/script

scriptsrc=./js/babel.min.js/script

scripttype=text/babel

varelement=h1helloworld/h1

ReactDOM.render(element,document.getElementById(app))

/scrip