React 组件的数据挂载方式

组件的数据挂载方式

React中数据分为两个部分

1. 属性
2. 状态
   经验： 频繁变化的就写成状态

属性(props)

props是正常从外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

类组件属性挂载方法

外部传入写法:

// 定义一个father组件

import React, { Component } from 'react'
import Son from './Son'
class Father extends Component{
// static defaultProps={
// money:1000
// }
render(){
return(
<div>
<h3> 父组件 </h3>
{/* <p>father内部自己的属性：{this.props.money}</p> */}
<hr/>
<Son name="Shirley Xu"/> //在父组件的模板以标签形式写入子组件
</div>
)
}
}
export default Father

// 定义一个son组件

import React, { Component } from 'react'
class Son extends Component{
render(){
return(
<div>
<h3> 子组件 </h3>
<p> { this.props.name }</p>
</div>
)
}
}
export default Son

import React from 'react';
import './App.css';
import Father from './component/Father' // 引入父组件
function App() {
return (
<div className="App">
<Father></Father>
{/* 在app组件中以标签形式写入父组件 */}
</div>
);
}
export default App;

内部设置写法：

// 定义一个father组件
import React, { Component } from 'react'
import Son from './Son'
class Father extends Component{
static defaultProps={// 父组件上用static defaultProps 来定义父组件的属性
money:1000
}
render(){
return(
<div>
<h3> 父组件 </h3>
<p>father内部自己的属性：{this.props.money}</p>
{/* 父组件上直接访问内部属性 */}
<hr/>
<Son name="Shirley Xu"/>
</div>
)
}
}
export default Father

import React from 'react';
import './App.css';
import Father from './component/Father' // 引入父组件
function App() {
return (
<div className="App">
<Father></Father>
{/* 在app组件中以标签形式写入父组件 */}
</div>
);
}
export default App;

属性是描述性质、特点的，组件自己不能随意更改。
之前的组件代码里面有props的简单使用，总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props:

函数式组件属性挂载方法

// 定义一个father组件
import React, { Component } from 'react'
import Son from './Son'
const Content=(props)=>{
// 函数式组件中不需要使用this,因为可以通过props接收外部传入的属性
// 函数式组件不能设置自己的属性，只能通过外部传入的属性
return <h1> { props.money } </h1>
}
class Father extends Component{
static defaultProps={
money:1000
}
render(){
return(
<div>
<h3> 父组件 </h3>
<p>{this.props.money}</p>
<hr/>
<Son name="Shirley Xu"/>
<hr/>
<Content money="10000"></Content>
</div>
)
}
}
export default Father

import React from 'react';
import './App.css';
import Father from './component/Father' // 引入父组件
function App() {
return (
<div className="App">
<Father></Father>
{/* 在app组件中以标签形式写入父组件 */}
</div>
);
}
export default App;

props.children（相当于vue里的slot）

我们知道使用组件的时候，可以嵌套。要在自定义组件的使用嵌套结构，就需要使用 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>// fragment可以减少一层虚拟dom结构
  <Title>React</Title>
<Content><i>React.js</i>是一个构建UI的库</Content>
</Fragment>
  )
}
}
ReactDOM.render(
  <App/>,
document.getElementById('root')
)

使用prop-types检查props

React其实是为了构建大型应用程序而生, 在一个大型应用中，根本不知道别人使用你写的组件的时候会传入什么样的参数，有可能会造成应用程序运行不了，但是不报错。为了解决这个问题，React提供了一种机制，让写组件的人可以给组件的props设定参数检查，需要安装和使用prop-types:

$ npm i prop-types -S

// 定义一个father组件
import React, { Component } from 'react'
import Son from './Son'
import PropTypes from 'prop-types'// 引入属性验证

const Content=(props)=>{
return <h1> { props.money } </h1>
}
class Father extends Component{
static defaultProps={
money:1000
}
render(){
return(
<div>
<h3> 父组件 </h3>
<p>{this.props.money}</p>
<hr/>
<Son name="Shirley Xu"/>
<hr/>
<Content money="10000"></Content>
</div>
)
}
}
Father.propTypes={ // 属性验证
// 类的属性：类的属性类型
classroom : PropTypes.string
}
export default Father

import React from 'react';
import './App.css';
import Father from './component/Father' // 引入父组件
function App() {
return (
<div className="App">
<Father classroom= '11' ></Father>
{/*在父组件中添加属性*/}
</div>
);
}
export default App;

状态(state)

状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
经验： 组件自己的状态只能自己更改

定义state

第一种方式 实例属性方式定义（不推荐）

import React, { Component } from 'react'
class StateComponent extends Component{
state={
msg:'这是一条状态'
}
render(){
return(
<div>
<p>组件-状态定义形式</p>
<p>{ this.state.msg }</p>
{/* 通过this.state.msg 展示状态 */}
</div>
)
}
}
export default StateComponent

import React from 'react';
import './App.css';
import StateComponent from './component/StateComponent'
function App() {
return (
<div className="App">
<StateComponent/>
</div>
);
}
export default App;

另一种方式 在构造函数constructor中定义 (推荐)

import React, { Component } from 'react'
class StateComponent extends Component{
constructor(props){ // 用来继承父组件props属性的
super(props)
this.state={
msg:'这是定义组件状态的第二种形式 也是最常见的方式'
}
}
render(){
return(
<div>
<p>组件-状态定义形式</p>
<p>{ this.state.msg }</p>
{/* 通过this.state.msg 展示状态 */}
</div>
)
}
}
export default StateComponent

this.props和this.state是纯js对象,在vue中，data属性是利用Object.defineProperty处理过的，更改​data的数据的时候会触发数据的getter和setter，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法setState。

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')
)

案例二

通过bind改变this指向 来添加事件绑定
this.setState以对象形式书写方式

import React, { Component } from 'react'
class StateComponent extends Component{
constructor(props){ // 用来继承父组件props属性的
super(props)
this.state={
msg:'未修改前的属性值'
}
}
// 业务：点击按钮 修改状态
// 在类中通过实例方法的形式来定义事件处理程序
change(){
// this.setState(arg1,arg2)
// arg1 可以是对象 也可以是函数 函数必须有返回值 return 并且return一个对象
// arg2 是一个回调函数 这个回调函数可以写也可以不写 一般不写
this.setState({
msg:'修改后的新属性值'
})
}
render(){
return(
<div>
<p>组件-状态定义形式</p>
<button onClick={ this.change.bind(this) }>修改状态</button>
{/* 这里的this指的是当前的button按钮 这里我们想要this指的是当前的组件 这里的this将会丢失 通过bind绑定this指向来解决这个问题*/}
<p>{ this.state.msg }</p>
{/* 通过this.state.msg 展示状态 */}
</div>
)
}
}
export default StateComponent

案例三

通过箭头函数解决this指向问题
this.setState以箭头函数形式书写方式

import React, { Component } from 'react'
class StateComponent extends Component{
constructor(props){ // 用来继承父组件props属性的
super(props)
this.state={
msg:'未修改前的属性值'
}
}
// 业务：点击按钮 修改状态
// 在类中通过实例方法的形式来定义事件处理程序
change = () => {
// this.setState(arg1,arg2)
// arg1 可以是对象 也可以是函数 函数必须有返回值 return 并且return一个对象
// arg2 是一个回调函数 这个回调函数可以写也可以不写 一般不写
this.setState(()=>{
return {
msg:'修改后的新属性值'
}
})
}
render(){
return(
<div>
<p>组件-状态定义形式</p>
<button onClick={ this.change }>修改状态</button>
{/* 这里的this指的是当前的button按钮 这里我们想要this指的是当前的组件 这里的this将会丢失 通过bind绑定this指向来解决这个问题*/}
<p>{ this.state.msg }</p>
{/* 通过this.state.msg 展示状态 */}
</div>
)
}
}
export default StateComponent

setState有两个参数

第一个参数可以是对象，也可以是方法 【return一个对象】，我们把这个参数叫做updater

• 参数是对象

this.setState({
isLiked: !this.state.isLiked
})

• 参数是方法

this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
})

注意的是这个方法接收两个参数，第一个是上一次的state, 第二个是props
setState是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数

this.setState((prevState, props) => {
return {
isLiked: !prevState.isLiked
}
}, () => {
console.log('回调里的',this.state.isLiked)
})
console.log('setState外部的',this.state.isLiked)

属性vs状态

相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）
不同点：

1. 属性能从父组件获取，状态不能
2. 属性可以由父组件修改，状态不能
3. 属性能在内部设置默认值，状态也可以
4. 属性不在组件内部修改，状态要改
5. 属性能设置子组件初始值，状态不可以
6. 属性可以修改子组件的值，状态不可以
   state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState方法进行更新，setState 会导致组件的重新渲染。
   props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。
   如果搞不清 state 和 props 的使用场景，记住一个简单的规则：尽量少地用 state，多用 props。
   没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。
   react性能优化一个方案： 就是多使用无状态组件（ 函数式组件 ）
   ##状态提升
   如果有多个组件共享一个数据，把这个数据放到共同的父级组件中来管理

受控组件与非受控组件

React组件的数据渲染是否被调用 是通过 传递过来的props完全控制，控制则为受控组件，否则非受控组件。

渲染数据

• 条件渲染

import React, { Component } from 'react'
class StateComponent extends Component{
constructor(props){ // 用来继承父组件props属性的
super(props)
this.state={
flag:true
}
}
change=()=>{
this.setState({
flag:!this.state.flag
})
}
render(){
return(
<div>
<button onClick={ this.change }>change state</button>
<p>msg: { this.state.flag && '❤️取消' || '?收藏' } </p>
</div>
)
}
}
export default StateComponent

• 列表渲染

基础写法：

import React, { Component } from 'react'
class StateComponent extends Component{
constructor(props){ // 用来继承父组件props属性的
super(props)
this.state={
todos:[
{
id:1,
task:'玩游戏'
},
{
id:2,
task:'敲代码'
}
]
}
}
render(){
const { todos } = this.state
return(
<div>
<h3> 列表渲染 </h3>
<ul>
{
todos.map(todo => <li key={ todo.id }> { todo.task } </li>)
}
</ul>
</div>
)
}
}
export default StateComponent

高级写法：

import React, { Component } from 'react'
const Item = (props) => {
return <li> { props.task } </li>
}
class StateComponent extends Component{
constructor(props){ // 用来继承父组件props属性的
super(props)
this.state={
todos:[
{
id:1,
task:'玩游戏'
},
{
id:2,
task:'敲代码'
}
]
}
}
renderItem = ()=>{
return this.state.todos.map(item =>{
return <Item key = {item.id} {...item}> </Item>
})
}
render(){
// const {todos} = this.state
return(
<div>
<h3> 列表渲染 </h3>
<ul>
{ this.renderItem() }
</ul>
</div>
)
}
}
export default StateComponent

React的高效依赖于所谓的 Virtual-DOM，尽量不碰 DOM。对于列表元素来说会有一个问题：元素可能会在一个列表中改变位置。要实现这个操作，只需要交换一下 DOM 位置就行了，但是React并不知道其实我们只是改变了元素的位置，所以它会重新渲染后面两个元素（再执行 Virtual-DOM ），这样会大大增加 DOM 操作。但如果给每个元素加上唯一的标识，React 就可以知道这两个元素只是交换了位置，这个标识就是key，这个 key 必须是每个元素唯一的标识

• dangerouslySetHTML
  对于富文本创建的内容，后台拿到的数据是这样的：

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')
)