React 学习 Day 01
Posted 鲸渔要加油
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 学习 Day 01相关的知识,希望对你有一定的参考价值。
文章目录
- React 学习
- 一、Reacte
- 二、JSX
- 三、显示数据调用函数
- 四、虚拟 DOM 和 diff 算法
- 五、函数组件
- 六、调动组件传值(props)
- 七、组件状态(State)
- 八、事件this指向
- 九、事件传参问题
- 小总结
- 组件的数据形式
- 状态
React 学习
一、Reacte
什么是 react :用于构建用户界面的js库( V => mv* )
创建元素对像 :const 元素对象名 = React.createElement( 待创建的标签, 待创建的标签属性对象奥/null, 子内容)
二、JSX
使用 createElement
创建 react
对象非常的麻烦,解决方法就是 JSX
JSX
:每个 JSX
元素都是调用 React.createElement()
语法糖
JSX
是js扩展语法,浏览器不支持,可以通过 babel
库来转换,引入 babel
后要记得 <script type="text/babel">
三、显示数据调用函数
在模板中显示数据调用函数
VUE 中, 函数名()
计算属性名直接用
React 中,函数名()
四、虚拟 DOM 和 diff 算法
DOM
真实 DOM html 标签组成的树状结构
虚拟 DOM 用 JS 语法组成的树状结构
diff 算法
- 用 JS 将真实的 DOM 变成虚拟的 DOM
- 更新同层比较新旧两个虚拟的 DOM 树差异
- 把比较的差异挂载到 DOM 树上
五、函数组件
构造函数
- 引入 react、reactdom、babel type="text/babel"
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
</script>
- 定义组件
function Login()
return(<div>
<form>
<p>
用户名:
<input type="text" />
</p>
<p>
密码:
<input type="text" />
</p>
<p>
<input type="submit" value="登录" />
</p>
</form>
</div>)
- 渲染(调用组件)
ReactDOM.render(<Login />, document.querySelector('#app'))
class 组件
定义一个 class 叫 Reg
class 就得继承 React.Component
在 render 方法中,返回(return)注册表单 JSX 语法
- 定义
class Reg extends React.Component
render()
return (<div>
<form>
<p>
用户名:
<input type="text" />
</p>
<p>
密码:
<input type="text" />
</p>
<p>
<input type="submit" value="登录" />
</p>
</form>
</div>)
- 渲染(调用组件)
ReactDOM.render(<Reg />, document.querySelector('#app'))
六、调动组件传值(props)
调用组件标签上有属性会自动被系统放到 props 中
属性名是 props 对象的键
切记: props 只读不能修改
<script type="text/babel">
// 函数组件提示
function ModalOne(props)
return (
// 属性名是props对象的键
<div>
<p>状态:props.status</p>
<p>提示:props.msg</p>
</div>)
// class 组件提示
// class 必须得继承
class ModalTwo extends React.Component
render()
return (
// 要加 this
<div>
<p>状态:this.props.status</p>
<p>提示:this.props.msg</p>
</div>)
// 渲染
ReactDOM.render(<div>
<ModalOne status="true" msg="远近渔1" />
<ModalOne status="true" msg="远近渔2" />
</div>, document.querySelector('#app'))
</script>
什么是组件: 就是将HTML、CSS、JS代码封装起来
组件的好处: 减少代码的冗余,便于后期维护
组件的定义:
Vue
Vue.component()
.vue
React
单库:构造函数、class语法 结合 JSX
框架:.js 里面写单库的语法
组件动态传递参数: props 属性来接受,调用组件时候传递
七、组件状态(State)
概念: react 组件中的状态,相当 vue 组件中的 data 模型数据
函数组件: 无组件状态
类组件: 有组件状态
vue:
声明data
声明
获取this.键
更新this.键=值
react:
声明constructor 中 this.state =
获取this.state.键
更新this.setState(键1:值1,...)
这是异步的
多学一招用的概率较低this.setState
这个语法是异步的,实战中希望数据更新完毕后弹框
this.setState(键1:值1,...,()=>alert(1))
八、事件this指向
例如 setNumFn 函数的 this 指向会报错
基础解决方法就是使用箭头函数
- 先获取
this.state
的变量 - 在使用
this.setState
来更新
setState
会再次触发render
函数来更新视图
<script type="text/babel">
class Test extends React.Component
constructor(props)
super(props)
this.state =
num: 666
setNumFn = () =>
// 语法: this.setState(, [callback])
// 1.获取
let temp = this.state.num + 1
// 2.更新
this.setState( num: temp )
render()
return (
<div>
<h1>this.state.num</h1>
<button onClick=this.setNumFn>更新</button>
</div>)
ReactDOM.render(<Test />, document.querySelector('#app'))
</script>
九、事件传参问题
绑定事件传参加小括号会直接触发事件
<script type="text/babel">
class Test extends React.Component
constructor(props)
super(props)
this.state =
num: 666
click1(num)
alert(1)
console.log(this, num);
render()
return (
<div>
// 绑定事件传参加小括号会直接触发事件
<button onClick=this.click1(666)>删除1</button>
// 推荐写法
<button onClick=e => this.click1(666, e)>删除1</button>
<button onClick=this.click1.bind(this, 999)>删除1</button>
</div>)
ReactDOM.render(<Test />, document.querySelector('#app'))
</script>
this 指向问题
解决1 (不推荐: 定义时候用箭头函数)
解决2 e => this.函数名(实参1,...实参n, e))
解决3 this.函数名.bind(this, 实参1,...实参n)
小总结
react 中设置事件: on事件类型=
方法1: this.函数名
定义时要使用箭头函数,否则有this执行问题,切记不能写小括号否则直接运行
方法2: e => this.函数名(实参1,...实参n, e)
当需要用事件对象
方法3(推荐): this.函数名.bind(this,实参1,...实参n)
组件的数据形式
状态 state
属性 props
props
- 由内部传入
不可更改
只有类组件可以内部
组件自己定义属性 static 属性名 = - 由外部设置
父级更改
函数组件写法,父属性绑定,子props接受,使用
类组件不需要接受加this使用,const属性名=this.props
state
state 是组件自身的,和外部无关,只能自己定义,自己更改
类组件state定义形式
<script>
export default class Hello extends Component
// 状态的定义形式 1
state =
count: 0
// 状态的定义形式 2 构造函数
construtor(props)
super(props)
this.state =
count: 0
render()
const count = this.state
return (<div>
count
</div>)
</script>
函数组件的state定义形式
useState 我们称之为 Hooks
<script>
import React, useState from 'react'
// useState 我们称之为 Hooks
export default function Hello()
// 格式 const/let [变量名] = useState(初始值)
const [count] = useState(0)
return (<div>
count
</div>)
</script>
组件的事件
- 事件
- 构成部分
- 1 事件源
- 2 事件类型
- 3 事件处理程序
- 事件数据部分
- 参数
- 实参
- 形参
- 事件对象
- 参数
- 构成部分
react 中的事件【 绑定在 JSX 上的 】属于合成事件
react 中的 e(事件对象) 是一个类,但里面的东西和原生的 e 是一样的
react 中事件的传参
- 如果是普通函数,建议使用 bind 来做传参
- 如果是箭头函数,在调用这个箭头函数时,在它的外层包裹一层箭头函数
<button onClick=this.handler>箭头函数事件</button>
<button onClick=this.handler.bind(this,10)>普通事件传参</button>
<button onClick=() => this.handler(10) >箭头函数传参</button>
状态
类组件
在这里插入代码片import React, Component from 'react'
export default class Hello extends Component
state =
count: 0
render()
const count = this.state
change = () =>
// ! React 中类组件的状态的更改必须使用 setState
// ! 1 第一种写法 同步
this.setState( count: ++this.state.count )
// ! 2 第二种写法 异步 回调函数 不用加 this
// ! 这里的形参就是 state 用 count 解构赋值
this.setState(( count ) =>
return count: ++count
)
// ! 需求: 网站标题跟随你的 count 的值发生变化
// ! 因为传进来的 count 永远都是旧值,所以用setState的第二个回调
this.setState((count) =>
// document.title = count
return
count: ++count
, () =>
//! 能够得到最新值,放到这里
document.title = this.state.count
)
return (
<div>
<button onClick=this.change> + </button>
<p>count</p>
</div>
)
问题
- setState 几个参数? 分别是什么作用?
2个参数
第一个参数是用于修改 state 的,可以是对象也可以是一个回调函数
第二个参数使用于获取最新的 state,它是一个回调函数 - setState 是同步还是异步的
第一个参数是一个对象 - 同步
第一个参数是一个回调函数 - 异步
以上是关于React 学习 Day 01的主要内容,如果未能解决你的问题,请参考以下文章