React快速上手04基础特性JSX、Props、State、Lifecycle、Event、Style

• 01 前言
• 02 开发环境搭建
• 03 脚手架创建项目 一切都是组件
• 04 基础特性 JSX、Props、State、Lifecycle、Event、Style
• 05 组件渲染控制
• 06 容器组件、展示组件
• 07 前端路由 react-router
• 08 状态管理 react-redux
• 09 数据请求 fetch
• 10 属性类型检查 prop-types

目标

掌握 react 的基础特性

• 语法 JSX
• 属性 Props
• 状态 State
• 生命周期 Lifecycle
• 事件 Event
• 样式 Style

基础特性

react.js 本身只是一个精简的类库，提供了几个特性或者说是工具，每个话题深入都可以长篇大论。

我这里只关注使用，毕竟轮子造出来还是用的，而不是观赏。

1. JSX 语法

我的理解 jsx 就是 html + 表达式 的混合体

1.1 请用 ( ... ) 把 jsx 代码包含起来

const Element1 = () => (

组件1 - 常量

这样写的理由

• 低版本的兼容性
• 多行书写不会报错

当然新版里如果你单行可以省略

1.2 必须有个顶级标签

错误
let Element4 = () => {
return (


组件4 - es6 箭头函数

如果你只有一个标签，自己本身就是顶级标签，无需加

1.3 { ... } 开始你的js表达式

function ElementShow(props) {
return (


分别打印 属性值、时间函数

1.4 对于没有子元素的标签来说，请关闭标签

结束符 /

codepen

https://codepen.io/ducafecat/&＃8230;

2. 属性 Props

2.1 属性值 都是只读的

function ElementShow(props) {
props.isShow = true // 只读不能修改
...

打印截图

2.2 特殊的几个 属性值

记忆就行，和我们之前写 html 有些差异

我看着都是因为 js 中保留字关系

示例

const ElementProps = () => (


2.3 默认使用驼峰格式 camelCase

错误
UserName="hello"
phone_number={12345678}
/>
正确
userName="hello"
phOneNumber={12345678}
/>

2.4 如果属性值为 true, 可以直接省略

错误
hidden={true}
/>
正确
hidden
/>

2.5 key 属性是怎么回事

示例

{NavRoutes.map((route, index) => (

• 
  {route.title}
  

))}

如果不写呢

看来是绕不过的

总结

react利用key来识别组件，它是一种身份标识标识

同层的唯一就行，不用全局唯一

避免使用数组的index作为
key 值

2.6 防注入攻击

代码

const jsCOntent= `
`
const ElementInject = () =>

打印

内容在渲染之前都被转换成了字符串，这样可以有效地防止 XSS(跨站脚本) 攻击

2.7 childen 表示子节点对象

这个属性表示，当前组件嵌套的对象集合

render() {
return(

First
Second
Third

)
}

RadioGroup 的
props.childen 就是这三个
RadioButton

你可能会问这有什么用，我们可以用来加工呀，各种循环、克隆、修改，当然我是不太推荐这样去修改 dom 对象

codepen

https://codepen.io/ducafecat/&＃8230;

3. 状态 State

组件内部的数据管理对象，自动状态控制

有的同学可能对 MVVM 比较了解，一定会说 React 怎么没有双向绑定

这可能就是设计思想问题了，不想给工具赋予过多负重，轻巧才灵活，下一章，我会通过一个函数解决双向绑定来处理表单操作，就几行代码

这里我们还是谈谈基础操作，懂得同学可以 PASS

3.1 初始化

class ElementStateStatic extends Component {
constructor(props) {
super(props)
this.state = {date: new Date()}
}
render() {
return

初始时间 => {this.state.date.toLocaleString()}

constructor 是组件构造函数，给
this.state 初始值时 要用
key/val 形式的对象

jsx 中使用时直接
this.state.data 对象调用即可

3.2 更新

class ElementStateUpdate extends Component {
constructor(props) {
super(props)
this.date = props.date
this.state = {date: new Date()}
}
componentDidMount() {
if (this.date !== undefined) {
// 传值方式
this.setState({date: this.date})
// 函数方式
// this.setState((state, props) => {
// return {date: this.date}
// })
}
}
render() {
return

更新时间 => {this.state.date.toLocaleString()}

需要使用
this.setState 函数设置

简单操作，直接 传入 key / value 的对象

• 如果需要之前的 state 或者组件属性 props ，需要写成

this.setState((state, props) => {
let date = state.data
date = date.addDay(10)
return {date}
})

codepen

https://codepen.io/ducafecat/&＃8230;

4. 生命周期 Lifecycle

4.1 组件有三种状态

4.2 组件周期函数

4.3 示例打印周期过程

代码

class ElementLifecycle extends Component {
constructor(props) {
super(props)
this.date = props.date
this.state = {date: this.date}
}
componentDidMount() {
console.log('componentDidMount 在第一次渲染后调用')
if (this.date !== undefined) {
this.setState({date: this.date})
}
}
shouldComponentUpdate(nextProps, nextState) {
console.log(
'shouldComponentUpdate 在组件接收到新的props或者state时被调用',
nextProps,
nextState
)
return true // 返回一个布尔值，大家可以试着在这里返回 false
}
componentDidUpdate(prevProps, prevState) {
console.log(
'componentDidUpdate 在组件完成更新后立即调用',
prevProps,
prevState
)
}
componentWillUnmount() {
console.log('componentWillUnmount 在组件从 DOM 中移除的时候立刻被调用')
}
render() {
return

时间 => {this.state.date.toLocaleString()}

打印截图

codepen

https://codepen.io/ducafecat/&＃8230;

4.4 react 16.x 新版本变动

4.4.1 计划取消 3 个生命周期函数

分别是 componentWillMount, componentWillReceiveProps, componentWillUpdate

理由是在新的升级中，存在漏洞（在Facebook上，他们维护了超过50,000个React组件。 ）

注意：

弃用警告将在未来的16.x版本中启用，但旧版生命周期将继续运行至17.x版。

即使在17.x版中，仍然可以使用它们，但它们会以『UNSAFE_』为前缀被重命名，以表明它们可能会引起问题。我们还准备了一个自动化的脚本来在现有代码中对它们重新命名。

UNSAFE_componentWillMount()
UNSAFE_componentWillReceiveProps()
UNSAFE_componentWillUpdate()

4.4.2 新增 getDerivedStateFromProps

组件实例化后和接受新属性时将会调用

代码

// 组件
class ElementLifecycleNew extends Component {
constructor(props) {
super(props)
this.state = {}
}
static getDerivedStateFromProps(nextProps, prevState) {
console.log(
'getDerivedStateFromProps 组件实例化后和接受新属性时将会调用',
nextProps,
prevState
)
// return null // 无需改变 返回 null
return {
date: new Date('2011-11-11 11:11:11')
}
}
render() {
return

{this.state.date.toLocaleString()}

如果你不想改变状态 state , 返回 null

4.4.3 新增 getSnapshotBeforeUpdate + componentDidUpdate

getSnapshotBeforeUpdate() 在最新的渲染输出提交给DOM前将会立即调用。它让你的组件能在当前的值可能要改变前获得它们。这一生命周期返回的任何值将会 作为参数被传递给
componentDidUpdate()。

// 代码
class ElementLifecycleNew2 extends Component {
listRef = React.createRef()
constructor(props) {
super(props)
this.state = {
date: props.date
}
}
componentDidMount() {
console.log('componentDidMount')
this.setState({date: new Date('2011-11-22 22:22:22')})
}
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('getSnapshotBeforeUpdate', prevProps, prevState, this.state)
return {
offset: 80
}
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('componentDidUpdate', snapshot)
this.listRef.current.style.top = `${snapshot.offset}px`
}
render() {
return (
blue',
position: 'relative',
color: '#fff'
}}
>


{this.state.date.toLocaleString()}