[JavaScript知识库]react(持续更新中)

react特点

声明式

组件化

一次学习,随处使用

create-react-app命令

安装

npx 是npm@5.2版本新添加的命令,简化npm工具,保证使用的是最新的react项目

npx create-react-app 文件名
cd 文件名
npm start

public/html文件
<div id="root"></div>
?

src/index.js
//导入react核心包
import React from 'react'
//导入react-dom渲染dom的包
import ReactDom from 'react-dom'
?
//创建标签
//创建标签,标签上面的属性; 对象,null;  第三个参数以及后续的参数都代表标签里面的内容
const h1Ele = React.createElement('h1', null, 'hello world')
//渲染标签
ReactDom.render(h1Ele, document.querySelector('#root'))

react用class需要使用className

JSX

js和xml的简写,在js中写html

jsx工作机制

//包
?
babel/preset-react ?jsx中有这样一个包
jsx会使用Babel编辑成react.reactElement() 的形式

注意点: 1个根节点,驼峰命名,换行建议用() 元素没有子节点可以用单标签

对象不可以直接使用,对象里面每个属性可以直接使用

数组可以,

小结:jsx可以包含任意表达式(除了对象)

JSX中不能放语句 例如if,switch,for,while

条件渲染

通过if...

key的作用,新能优化

map渲染数据,返回一个新的数组

样式渲染

函数组件

------本质js函数/又称无状态组件

使用

1:先定义,大写
2:使用 return

this指向undefined

------代码编译之后,会默认开启严格模式,而严格模式下调用函数,就是undefined

如果不需要渲染结构,return null

React.render() 解析内部使用过程

React.render(<Hello/>) //解析内部使用过程
-----解析函数组件,发现首字母是大写的,会当做组件进行解析,又发现是一个函数式组件,所以内部会调用这个函数,得到一段JSX(react 元素 /虚拟 dom),转换成真实dom渲染到页面上面
?
注意:Hello() 不推荐这样写,因为这样会当做成一个普通函数使用,而不是一个组件

//插件推荐
Better Comments
TODP Highlight
Image preview

类组件

----复杂组件/状态组件----可以定义state的组件

使用

1:首字母大写
2:类组件应该继承React.Component父类,从而可以使用父类中提供的方法或者属性
3:类组件必须提供render()方法,此方法中的this指向此组件的实例对象,此方法中必须要有return返回值

类组件ReactDOM.reander()渲染过程

ReactDOM.render(<Hello/>, document.querySelector('#root'))
解析<Hello/>, 发现大写开头的,会当做组件进行解析
又发现是一个类组件,内部会new hello()得到一个组件实例,调用实例下面的reander方法,拿到JX结构(虚拟DOM, React 元素)
转换成真实DOM渲染到页面上面

react的特点:

可以被改变,改变之后影响视图

类组件的状态如何定义跟使用

直接在class内部通过等号赋值的是挂载到实例上的

解决this指向的5种方法

1.高阶函数:返回函数的函数,函数作为参数传递的函数 例如:arr.map(() => {})

state = {
 ? ?count: 0,
}
handleClick() {
 ? ?return () => {
 ? ? ? ?//箭头函数里面没有this, 会向外找,而外部就是实例
 ? ? ? ?console.log(this)
 ?  }
}
render() {
 ? ?return (
 ? ?<div>
 ? ?<h2>计数器:{this.state.count}</h2>
 ? ? //
 ? ?<button Onclick={this.handleClick()}>+1</button>
 ? ? </div>
 ?  )
}

2.bind(this) bind指向谁,谁就是this

//bind(this) ? bind指向谁,谁就是this
?
state = {
 ? ?count: 0,
}
handleClick() {
 ? ?console.log(this)
}
render() {
 ? ?return (
 ? ?<div>
 ? ?<h2>计数器:{this.state.count}</h2>
 ? ? //bind是谁,this就指向谁
 ? ?<button Onclick={this.handleClick.bind(this)}>+1</button>
 ? ? </div>
 ?  )
}

3....通过constructor,中的this永远是实例对象

constructor() {
 ? ?super() 
 ? ?this.handleClick = this.handeClick.bind(this)
}
handleClick() {
 ? ?consloe.log(this) ?//实例---实例主体可以调用多次
}
?
render() {
 ? ?<div>
 ? ?<h2>计数器:{this.state.count}</h2>
 ? ? //这里的this指的是实例化对象,
 ? ?<button Onclick={this.handleClick}>+1</button>
 ? ? </div>
}
...通过constructor,中的this永远是实例对象

4.箭头函数

state = {
 ? ?count = 0
}
//挂载在实例上面
handleClick = () => {
 ? ?//箭头函数,this指向找最近一层的外面
 ? ?console.log(this)
}
<h2>计数器:{this.state.count}</h2>
//这里的this指的是实例化对象,
<button Onclick={this.handleClick}>+1</button>

5.点击事件里面包含箭头函数()

state = {
 ? ?count = 0
}
//挂载在实例上面
handleClick(){
 ? ?//箭头函数,this指向找最近一层的外面
 ? ?console.log(this)
}
<h2>计数器:{this.state.count}</h2>
//这里的this指的是实例化对象,
<button Onclick={() => {
 ? ?this.handleClick()
}}>+1</button>
?

this.setstate

this.setstate修改数据的时候,保留原数据

数据改变驱动视图

this.setState({}) //修改state并更新视图

setState() 函数是通过继承而来的

----该操作是合并,不会影响没有操作到的数据

动态更新数据视图更新的两种方法
constructor中通过this.state = {
 ? ?//里面必须携带super()
 ? ?this.state = {}
}
------
?
state = {}