react

React高效的原因6.React强大之处二、React基础格式1.什么是虚拟dom2.为什么要创建虚拟dom三、React也分为俩种创建方式1.

使用js的方式来创建2.使用jsx方式创建四、jsx的语法规则五、react定义组件1.函数式组件2.类式组件3.函数式组件和类式组件的区别六、

、事件处理八、react收集表单1.非受控组件2.受控组件九、高阶函数1.高阶函数2.函数柯里化十、

组件的生命周期1.什么是组件的生命周期2.钩子函数的作用3.生命周期的意义4.生命周期使用场景5.react

生命周期旧6.React

自己整理的react文档结合官网和所学知识的一个总结希望对各位有用。

话不多说看下文

一、React简介

而Vue是通过一种拓展的HTML语法进行渲染但其实这只是表面现象毕竟React并不必须依赖JSX。

.

在深层上模板的原理不同这才是他们的本质区别React是在组件JS代码中通过原生JS实现模板中的常见语法比如插值条件循环等都是通过JS语法实现的更加纯粹更加原生。

.

而Vue是在和组件JS代码分离的单独的模板中通过指令来实现的比如条件语句就需要

v-if

最小化页面重绘。

关于虚拟DOM1.本质上是object类型的对象一般对象2.虚拟DOM比较轻真实DOM比较重。

因为虚拟DOM6.React强大之处

速度快

它并不直接对DOM进行操作引入了一个叫做虚拟DOM的概念安插在javascript逻辑和实际的DOM之间性能好

虚拟DOM帮助我们解决了跨浏览器问题它为我们提供了标准化的API甚至在IE8中都是没问题的。

单向数据流

Flux是一个用于在JavaScript应用中创建单向数据层的架构它随着React视图库的开发而被Facebook概念化。

兼容性好

比如使用RequireJS来加载和打包而Browserify和Webpack适用于构建大型应用。

它们使得那些艰难的任务不再让人望而生畏

二、React基础格式

initial-scale1.0titleDocument/title

/headbodydiv

src./js/react.development.js/script!--

react-dom

src./js/react-dom.development.js/script!--

babel1.es6

src./js/babel.min.js/scriptscript

typetext/babel//

ReactDOM.render(虚拟dom真实dom)ReactDOM.render(VDOM,document.getElementById(test))/script

/body/html讲解

首先我们需要完成基础引入react。

然后先创建一个虚拟dom再把虚拟dom在指定元素里渲染成真实dom

DOM

我们知道虚拟DOM的概念是由Facebook的React团队最早提出来的也是React框架的核心概念之一。

它的作用是以js的形式在内存中描述真实的DOM结构这样当页面内容需要发生变动时React可以通过对前后虚拟DOM的比对计算出如何以最小的代价操作真实DOM。

三、React也分为俩种创建方式

initial-scale1.0titleDocument/title

/headbody!--

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/scriptscript

1.创建虚拟

React.createElement(标签名标签属性标签内容)const

VDOM

React.createElement(span,{},hello

react))//

ReactDOM.render(虚拟dom真实dom)ReactDOM.render(VDOM,

document.getElementById(test));/script

建议使用

initial-scale1.0titleDocument/title

/headbody!--

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

babel1.es6

src../js/babel.min.js/scriptscript

typetext/babel//

React.createElement(标签名标签属性标签内容)const

VDOM

(h1hellospanreact-dom/span/h1)//

ReactDOM.render(虚拟dom真实dom)ReactDOM.render(VDOM,

document.getElementById(test));/script

!DOCTYPE

initial-scale1.0titleDocument/titlestyle.title{color:

aliceblue;}/style

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

babel1.es6

src../js/babel.min.js/scriptscript

typetext/babellet

React.createElement(标签名标签属性标签内容)const

VDOM

ReactDOM.render(虚拟dom真实dom)ReactDOM.render(VDOM,document.getElementById(test));/script

/body/html注意

4.内联样式要用style{{key:value}}的形式去写

5.只能有一个根元素

1.若是小写字母开头则将改标签转化为html同名的元素渲染到页面

2.若大写字母开头react就会去渲染对应的组件若组件没有定义则报错/五、react定义组件

**声明**组件化是React的核心思想也是我们后续课程的重点前面我们封装的App本身就是一个组件

组件化提供了一种抽象让我们可以开发出一个个独立可复用的小组件来构造我们的应用。

React的组件相对于Vue更加的灵活和多样按照不同的方式可以分成很多类组件

这些概念有很多重叠但是他们最主要是关注数据逻辑和UI展示的分离

当然还有很多组件的其他概念比如异步组件、高阶组件等我们后续再学习。

1.函数式组件

initial-scale1.0titleDocument/titlestyle.title

{color:

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

babel1.es6

src../js/babel.min.js/scriptscript

typetext/babel//

h2我是用函数定义的组件(适用于【简单组件】的定义/h2}//

ReactDOM.render(虚拟dom真实dom)ReactDOM.render(MyComponent

document.getElementById(test));/*执行ReactDOM.render()方法之后发生了什么1.React解析了组件标签找到了对应的组件2.发现这个组件是一个函数定义的

随后调用改函数生成了一个虚拟dom3.最后将虚拟dom转化为真实dom呈现在页面中*//script

/body/html2.类式组件

initial-scale1.0titleDocument/titlestyle/style

/headbody!--

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

babel1.es6

src../js/babel.min.js/scriptscript

typetext/babel//

React.Component{//render方法是放在原型上//

---实例对象render(){console.log(render中的this,this)return

h2我是用类定义的组件(适用于【复杂组件】的定义/h2}}ReactDOM.render(MyComponent

document.getElementById(test));/*执行ReactDOM.render()方法之后发生了什么1.React解析了组件标签找到了对应的组件2.发现这个组件是一个类定义的

随后new出来一个实例对象并通过该实例对象调用原型上的render方法3.最将render()

返回的内容生成一个虚拟dom4.最后将虚拟dom转化为真实dom呈现在页面中*/let

new

MyComponent();console.log(c)/script

1、函数组件是一个纯函数它接收一个props对象返回一个react元素而类组件需要去继承React.Component并且创建render函数返回react元素。

官方建议使用函数式组件

initial-scale1.0titleDocument/titlestyle/style

/headbody!--

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

babel1.es6

src../js/babel.min.js/scriptscript

typetext/babel//

onClick{this.changewWea***r}今天天气很爽

{isTian

})//这里的修改是覆盖还是合并}}ReactDOM.render(Wea***r

document.getElementById(test));/script

/body/html2.props

initial-scale1.0titleDocument/title

/head

src../js/react.development.js/script!--

操作dom

src../js/react-dom.development.js/script!--

引入babel

src../js/babel.min.js/scriptscript

typetext/babelclass

{//是否接受取决于是否使用外部数据super(props)//只能上面接受了propssuper()就去传递否则后续的使用可能就会出现问题}static

propTypes

PropTypes.string.isRequired,//限制name为字符串类型必填//

age:

(ulli姓名{name}/lili性别{sex}/lili年龄{age

1}/li/ul)}}/*问题1.数据类型是否有对应的限制2.数据的数量

批量传输可以使用展开运算符*/ReactDOM.render(Wea***r

nametom

document.getElementById(test))/script

/body/html3、ref

是父组件与子组件交互的唯一方式。

要修改一个子组件你需要使用新的

props

来重新渲染它。

但是在某些情况下你需要在典型数据流之外强制修改子组件。

被修改的子组件可能是一个

React

链接https://juejin.cn/post/7047113456993959972

来源稀土掘金

著作权归作者所有。

商业转载请联系作者获得授权非商业转载请注明出处。

!DOCTYPE

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

引入babel1.

src../js/babel.min.js/scriptscript

typetext/babelclass

{//转款专用每一个ref都是唯一的存在this.refs中let

ipt

this.refs;alert(ipt.value)}getData(){let

ipt1

this.refs;alert(ipt1.value)}render()

{return

onClick{this.showData}点我提示左侧的数据/buttoninput

refipt1

document.getElementById(test))/script

/body/html七

2)React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

refs

idtest/divulli/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/lili/li/ul!--

React

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

引入babel1.

src../js/babel.min.js/scriptscript

typetext/babelclass

{alert(this.myRef.current.value)console.log(event.target)}showData1

{alert(this.myRef1.current.value)}//

回调函数//

onClick{this.showData}点我提示左侧的数据/buttoninput

ref{this.myRef1}

document.getElementById(test))/script

1.非受控组件

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

引入babel1.

src../js/babel.min.js/scriptscript

typetext/babelclass

{handler(event){event.preventDefault();//阻止默认事件

---

this;alert(你输入的名字${username.value},密码是${password.value})}render()

{return

typesubmit登录/button/form/div)}}ReactDOM.render(Person

document.getElementById(test))/script

/body/html2.受控组件

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

引入babel1.

src../js/babel.min.js/scriptscript

Person

{event.preventDefault();//阻止默认事件

---

this.state;alert(你输入的名字${username},密码是${password})}render()

{return

typesubmit登录/button/form/div)}}ReactDOM.render(Person

document.getElementById(test))/script

/body/html九、高阶函数

高阶函数如果一个函数符合下面2个规范中的任何一个那么它就是属于一个高阶函数

2.若A函数调用的返回值依然是一个函数那么A也可以称为高阶函数

常见的高阶函数Promise,setTimeout,arr.map回调函数等等函数柯里化通过函数的继续调用

返回值为函数的方式实现的多次接收参数最会统一处理的函数编码形式

!DOCTYPE

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

引入babel1.

src../js/babel.min.js/scriptscript

typetext/babel/*

console.log(event.target.value,)this.setState({[dataType]:

username

{event.preventDefault();//阻止默认事件

---

this.state;alert(你输入的名字${username},密码是${password})}render()

{return

onChange{this.saveFormData(username)}

/密码input

onChange{this.saveFormData(password)}

/button

typesubmit登录/button/form/div)}}ReactDOM.render(Person

document.getElementById(test))/script

/body/html2.函数柯里化

柯里化Currying是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数并且返回接受余下的参数且返回结果的新函数的技术

!DOCTYPE

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

引入babel1.

src../js/babel.min.js/scriptscript

Person

标识当前标签this.setState({[dataType]:

event.target.value})}//表单提交回调handler

(event)

{event.preventDefault();//阻止默认事件

---

this.state;alert(你输入的名字${username},密码是${password})}render()

{return

typesubmit登录/button/form/div)}}ReactDOM.render(Person

document.getElementById(test))/script

/body/html十、

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

引入babel1.

src../js/babel.min.js/scriptscript

typetext/babel//

1}constructor(){super();console.log(constructor)}//组件将要挂载componentWillMount(){console.log(componentWillMount)}//组件将要卸载componentWillUnmount(){console.log(啊

我Neo写咋)clearInterval(this.timer)}//组件挂载完成之后componentDidMount()

{console.log(componentDidMount)setInterval(()

{//

200)}death(){//卸载组件ReactDOM.unmountComponentAtNode(document.getElementById(test))}render()

(divspan

onClick{this.death}按钮/button/div)}}//

2.渲染到页面中的指定domReactDOM.render(Person

document.getElementById(test))/script

/body/html5.react

由组件内部this.setSate()或父组件重新render触发

3.render()

由ReactDOM.unmountComponentAtNode()触发

!DOCTYPE

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

引入babel1.

src../js/babel.min.js/scriptscript

typetext/babel/*1.

由ReactDOM.render()触发---初次渲染1.constructor()2.componentWillMount()3.render()4.componentDidMount()

常用一般在这个钩子中做一些初始化的事情例如开启定时器发送网络请求2.

更新阶段:

由组件内部this.setSate()或父组件重新render触发1.shouldComponentUpdate()2.componentWillUpdate()3.render()

卸载组件:

由ReactDOM.unmountComponentAtNode()触发1.componentWillUnmount()

取消订阅*/class

{ReactDOM.unmountComponentAtNode(document.getElementById(test))}force

{console.log(count

(divh2当前求和为{this.state.count}/h2button

onClick{this.add}点我1/buttonbutton

onClick{this.death}卸载组件/buttonbutton

onClick{this.force}不更改任何状态中的数据强制更新/button/div)}}//

父组件class

onClick{this.changeCar}换车/buttonB

//div)}}//

(div我是b组件,接收到的车是:{this.props.carName}/div)}}ReactDOM.render(A

document.getElementById(test))/script

/body/html6.React

由组件内部this.setSate()或父组件重新render触发

3.render()

由ReactDOM.unmountComponentAtNode()触发

!DOCTYPE

src../js/react.development.js/script!--

react-dom

src../js/react-dom.development.js/script!--

引入babel1.

src../js/babel.min.js/scriptscript

typetext/babel/*1.

由ReactDOM.render()触发---初次渲染1.constructor()2.componentWillMount()3.render()4.componentDidMount()

常用一般在这个钩子中做一些初始化的事情例如开启定时器发送网络请求2.

更新阶段:

由组件内部this.setSate()或父组件重新render触发1.shouldComponentUpdate()2.componentWillUpdate()3.render()

卸载组件:

由ReactDOM.unmountComponentAtNode()触发1.componentWillUnmount()

取消订阅*/class

{ReactDOM.unmountComponentAtNode(document.getElementById(test))}force

{console.log(count

(divh2当前求和为{this.state.count}/h2button

onClick{this.add}点我1/buttonbutton

onClick{this.death}卸载组件/buttonbutton

onClick{this.force}不更改任何状态中的数据强制更新/button/div)}}//

父组件class

getDerivedStateFromProps(props,state){//

这里必须要一个返回值

全部依赖于外部的props那么可以使用这个生命周期函数return{carName:qq}}//

获取数据getSnapshotBeforeUpDate(prevState,prevProps){}render()

{console.log(A

onClick{this.changeCar}换车/buttonB

//div)}}//

(div我是b组件,接收到的车是:{this.props.carName}/div)}}ReactDOM.render(A

document.getElementById(test))/script

/body/html7.

现在使用会出现警告下一个大版本需要加上UNSAFE_前缀才能使用以后可能会被彻底废弃不建议使用。