React组件
函数式组件
通过定义function来创建函数式组件
function MyComponet() {
console.log(this); // 此处的this是undefined babel翻译后开启了严格模式
return <h2>函数式组件</h2>
}
// 渲染组件到页面
ReactDOM.render(<MyComponet/>,document.querySelector('.main-container'))
类式组件
通过定义class来创建类式组件
class MyComponet extends React.Component{
render(){
console.log(this); // 此处的this为MyComponet的实例对象 因为render在MyComponet的原型对象上
return <h2>类定义的组件</h2>
}
}
// 渲染组件到页面
ReactDOM.render(<MyComponet/>,document.querySelector('.main-container'))
根标签
可以使用<React.Fragment></React.Fragment>
进行包裹
React.Fragment组件能在不创建额外的DOM元素下 让render()返回多个元素
React.Fragment允许将子列表分组 无需添加额外的节点
可以简写成<></>
但简写不能接受键值或属性, React.Fragment可以
组件的组合、嵌套
将一个组件渲染到某一个节点里的时候,会将这个节点里原有内容覆盖
组件嵌套的方式就是将子组件写入到父组件的模板中去,且react没有Vue中的内容分发机制(slot)
所以在一个组件的模板中只能看到父子关系
// 从 react 的包当中引入了 React 和 React.js 的组件父类 Component
// 还引入了一个React.js里的一种特殊的组件 Fragment
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
render () {
return (
<h1>欢迎进入React的世界</h1>
)
}
}
class Content extends Component {
render () {
return (
<p>React.js是一个构建UI的库</p>
)
}
}
/** 由于每个React组件只能有一个根节点,所以要渲染多个组件的时候,需要在最外层包一个容器,如果使用div, 会生成多余的一层dom
class App extends Component {
render () {
return (
<div>
<Title />
<Content />
</div>
)
}
}
**/
// 如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹
class App extends Component {
render () {
return (
<Fragment>
<Title />
<Content />
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
组件的数据挂载方式
1、属性(props)
props
是正常是外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改,但是你可以通过父组件主动重新渲染的方式来传入新的 props
属性是描述性质、特点的,组件自己不能随意更改。
之前的组件代码里面有props
的简单使用,总的来说,在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为组件 props
对象的键值。通过箭头函数创建的组件,需要通过函数的参数来接收props
:
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
render () {
return (
<h1>欢迎进入{this.props.name}的世界</h1>
)
}
}
const Content = (props) => {
return (
<p>{props.name}是一个构建UI的库</p>
)
}
class App extends Component {
render () {
return (
<Fragment>
<Title name="React" />
<Content name="React.js" />
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
(1) 设置组件的默认props
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
// 使用类创建的组件,直接在这里写static方法,创建defaultProps
static defaultProps = {
name: 'React'
}
render () {
return (
<h1>欢迎进入{this.props.name}的世界</h1>
)
}
}
const Content = (props) => {
return (
<p>{props.name}是一个构建UI的库</p>
)
}
// 使用箭头函数创建的组件,需要在这个组件上直接写defaultProps属性
Content.defaultProps = {
name: 'React.js'
}
class App extends Component {
render () {
return (
<Fragment>
{/* 由于设置了defaultProps, 不传props也能正常运行,如果传递了就会覆盖defaultProps的值 */}
<Title />
<Content />
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
(2) props.children
使用组件的时候,可以嵌套。要在自定义组件的使用嵌套结构,就需要使用 props.children
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class Title extends Component {
render () {
return (
<h1>欢迎进入{this.props.children}的世界</h1>
)
}
}
const Content = (props) => {
return (
<p>{props.children}</p>
)
}
class App extends Component {
render () {
return (
<Fragment>
<Title>React</Title>
<Content><i>React.js</i>是一个构建UI的库</Content>
</Fragment>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
当有多个props.children时接收到的为一个数组,通过索引获取
<div>
{this.props.children[2]}
{this.props.children[1]}
{this.props.children[0]}
</div>
(3) 使用prop-types检查props
React其实是为了构建大型应用程序而生, 在一个大型应用中,根本不知道别人使用你写的组件的时候会传入什么样的参数,有可能会造成应用程序运行不了,但是不报错。为了解决这个问题,React提供了一种机制,让写组件的人可以给组件的props
设定参数检查,需要安装和使用prop-types:
import types from 'prop-types' // 引入props验证模块 react自带不需下载
import React, { Component } from 'react'
export default class Navbar extends Component {
render() {
return (
<div>doc</div>
)
}
}
// 添加类属性验证
Navbar.propTypes = {
title:types.string,
flag:types.bool // string bool 为prop-types 自带方法
}
// 由于是在类的属性上添加propTypes 因此可以直接在类上定义静态属性 无需分开定义
import React, { Component } from 'react'
export default class Navbar extends Component {
static propTypes = {
title:types.string,
flag:types.bool
}
render() {
return (
<div>code</div>
)
}
}
(4) 使用props默认值
import React, { Component } from 'react'
export default class Navbar extends Component {
static defaultProps = {
flag:true
}
render() {
return (
<div>code</div>
)
}
}
函数组件中因为没有静态属性所以必须要用Navbar.propTypes={ }的写法
2、状态(state)
state是组件对象中最重要的属性 值是对象 可以包含多个key-value的组合
组件被称为"状态机",通过更新组件的state来更新对应的页面显示(重新渲染组件)
组件中的render中的this为组件实例对象
组件自定义方法中this为undefined 可以通过bind强制绑定this或箭头函数解决
状态数据不能直接修改或更新
在vue中data时利用object.defineProperty处理过的更改data的数据会触发数据的getter和setter
但是React中没有做过这样的处理 所以需要更改状态的方法setState()
状态就是组件描述某种显示情况的数据,由组件自己设置和更改,也就是说由组件自己维护
使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
(1) 定义state
类式组件要初始化属性时 需要构造器(不推荐)
import React from 'react'
export default class Weather extends React.Component{
constructor(props){ // 当需要使用state初始化属性时必须使用构造器 传入props
super(props) // 根据类的规范 在this之前必须调用super()
this.state = {isHot:false,wind:'微风'} // 初始化state属性并赋值
this.changeWeather = this.changeWeather.bind(this)
// 将实例的原型上的方法通过bind绑定this到实例对象上并挂载到实例上
}
render(){
const {isHot,wind} = this.state // 从state上解构出需要的属性
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热':'凉爽'},{wind}</h1>
// 此时click调用changeWeather 因为实例上有changeWeather方法 所以不会通过原型链调用原型上的方法
// 如果调用原型上的changeWeather this指向window 严格模式下undefined
}
changeWeather(){
// bind绑定this到实例对象后 可以this获取到实例上的state 然后通过setState更改state的值
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
因为本质上只需用到state不需要构造器 可以简写成
import React from 'react'
export default class Weather extends React.Component {
// 当class的构造器外变量直接赋值时 属性直接挂载在实例对象中
// 初始化state属性
state = { isHot: false, wind: '微风' }
render () {
const { isHot, wind } = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
}
// 此时changeWeather为直接赋值 所以方法在实例对象中
// 然后通过箭头函数得到上下文中的this 即实例的this
changeWeather = () => {
const isHot = this.state.isHot
this.setState({ isHot: !isHot })
}
}
this.props
和this.state
是纯js对象,在vue中,data属性是利用Object.defineProperty
处理过的,更改data的数据的时候会触发数据的getter
和setter
,但是React中没有做这样的处理,如果直接更改的话,react是无法得知的,所以,需要使用特殊的更改状态的方法setState
。
(2) setState
isLiked
存放在实例的 state
对象当中,组件的 render
函数内,会根据组件的 state
的中的isLiked
不同显示“取消”或“收藏”内容。下面给 button
加上了点击的事件监听。
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
constructor() {
super()
this.state = {
name: 'React',
isLiked: false
}
}
handleBtnClick = () => {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
return (
<div>
<h1>欢迎来到{this.state.name}的世界</h1>
<button onClick={this.handleBtnClick}>
{
this.state.isLiked ? '❤️取消' : '🖤收藏'
}
</button>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
setState
有两个参数
第一个参数可以是对象,也可以是方法return一个对象,我们把这个参数叫做updater
参数是对象
this.setState({
isLiked: !this.state.isLiked
})
参数是方法
this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
})
注意的是这个方法接收两个参数,第一个是上一次的state, 第二个是props
state的同步与异步
在同步代码中setState
是异步的,异步更新状态,异步更新真实dom
所以想要获取到最新的state,没有办法获取,就有了第二个参数,这是一个可选的回调函数,状态和dom更新完后就会被触发
this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
}, () => {
console.log('回调里的',this.state.isLiked)
})
console.log('setState外部的',this.state.isLiked)
在异步代码中setState是同步的,同步更新状态,同步更新真实dom
3、属性vs状态
相似点:都是纯js对象,都会触发render更新,都具有确定性(状态/属性相同,结果相同)
不同点:
- 属性能从父组件获取,状态不能
- 属性可以由父组件修改,状态不能
- 属性能在内部设置默认值,状态也可以
- 属性不在组件内部修改,状态要改
- 属性能设置子组件初始值,状态不可以
- 属性可以修改子组件的值,状态不可以
state
的主要作用是用于组件保存、控制、修改自己的可变状态。state
在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。你可以认为 state
是一个局部的、只能被组件自身控制的数据源。state
中状态可以通过 this.setState
方法进行更新,setState
会导致组件的重新渲染。
props
的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的 props
,否则组件的 props
永远保持不变。
如果搞不清 state
和 props
的使用场景,记住一个简单的规则:尽量少地用 state
,多用 props
。
没有 state
的组件叫无状态组件(stateless component),设置了 state 的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。这样会降低代码维护的难度,也会在一定程度上增强组件的可复用性。
4、状态提升
如果有多个组件共享一个数据,把这个数据放到共同的父级组件中来管理
5、受控组件与非受控组件
React组件的数据渲染是否被调用者传递的props
完全控制,控制则为受控组件,否则非受控组件。
6、渲染数据
条件渲染
{
condition ? '❤️取消' : '🖤收藏'
}
列表渲染
// 数据
const people = [{
id: 1,
name: 'Leo',
age: 35
}, {
id: 2,
name: 'XiaoMing',
age: 16
}]
// 渲染列表
{
people.map(person => {
return (
<dl key={person.id}>
<dt>{person.name}</dt>
<dd>age: {person.age}</dd>
</dl>
)
})
}
React的高效依赖于所谓的 Virtual-DOM,尽量不碰 DOM。对于列表元素来说会有一个问题:元素可能会在一个列表中改变位置。要实现这个操作,只需要交换一下 DOM 位置就行了,但是React并不知道其实我们只是改变了元素的位置,所以它会重新渲染后面两个元素(再执行 Virtual-DOM ),这样会大大增加 DOM 操作。但如果给每个元素加上唯一的标识,React 就可以知道这两个元素只是交换了位置,这个标识就是key
,这个 key
必须是每个元素唯一的标识
- dangerouslySetInnerHTML
对于富文本创建的内容,后台拿到的数据是这样的:
content = "<p>React.js是一个构建UI的库</p>"
处于安全的原因,React当中所有表达式的内容会被转义,如果直接输入,标签会被当成文本。这时候就需要使用dangerouslySetHTML
属性,它允许我们动态设置innerHTML
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
constructor() {
super()
this.state = {
content : "<p>React.js是一个构建UI的库</p>"
}
}
render () {
return (
<div
// 注意这里是两个下下划线 __html
dangerouslySetInnerHTML={{__html: this.state.content}}
/>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
7、PureComponent
PureComponnet
里如果接收到的新属性或者是更改后的状态和原属性、原状态相同的话,就不会去重新render了
在里面也可以使用shouldComponentUpdate
,而且。是否重新渲染以shouldComponentUpdate
的返回值为最终的决定因素。
决定shouldComponentUpdate 返回true或者false 从而决定要不要呼叫render function
如果state或props一直都在变化,那PureComponent并不会比较快,因为shallowEqual也需要花时间
import React, { PureComponent } from 'react'
class YourComponent extends PureComponent {
……
}
8、Function Component
在类组件中通过PureComponent可以减少组件的重新加载
在函数组件中要通过memo高阶组件
组件仅在它的props发生变化的时候进行重新渲染,通常来说,在组件中React组件,只要有变化就会走一遍渲染流程
React.memo(),我们可以仅仅让某些组件进行渲染
PureComponent只能用于class组件,memo用于functional组件
const Child = memo(()=>{
return <div>child</div>
})