【React全解1】React组件、props、state&setState

目录

• 组件简介
• 类组件
• 函数组件
• props（外部数据）和state（内部数据）&setState
• 复杂state

一、组件简介

二、类组件

1、ES5方式（过时）

import React from 'react';
const A=React.createClass({
	render(){
		return (
			<div>Hello,world!</div>
		)
	}
})
export default A;

2、ES6方式

import React from 'react';
class B extends React.Component{
	/* constructor是初始化的过程 */
	constructor(props){
		super(props);
	}
	render(){
		return (
			<div>Hello,world!</div>
		)
	}
}
export default B;

三、函数组件

1、创建方式

// # 使用箭头函数创建函数组件
const Hello1=(props)=>{
	return (
		<div>{props.msg}</div>
	)
}
// # 简写的箭头函数创建组件
const Hello2=props=><div>{props.msg}</div>
// # 函数function创建
function Hello(props) {
	return (
		<div>{props.msg}</div>
	)
}

2、使用函数组件

ReactDOM.render(<Hello1>,document.queryselector('root'));
# 或者
ReactDOM.render(Hello1(),document.queryselector('root'))

四、props（外部数据）和state（内部数据）&setState

1、props

• props的作用

1. 接受外部数据，只能读不能写！！！外部数据由父组件传递
2. 接受外部函数，在恰当的时机调用该函数，该函数一般是父组件的函数

• props在类组件中的初始化

import React from 'react';
class B extends React.Component{
	constructor(props){
		super(props)
	}
	render(){}
}

注意

1. 要么不初始化，即不写constructor
2. 如何要初始化，必须写全套constructor，不写super()会直接报错
3. 初始化后，this.props就是外部数据对象的地址了

• props在函数组件中的初始化

function App(props) {
	return (
		<div>{props}</div>
	)
}

2、读取props数据

• 主类组件A给副类父组件B传递props数据

class App extends React.Component {
	render() {
		return (
			<div>
		  	  这里是父组件
		  	  <B name='高圆圆' age='18'/>
			</div>
		)
	}
}

• 副类组件B中读取props数据

import React from 'react';
class B extends React.Component{
	constructor(props){
		super(props)
	}
	render(){
		return (
			<>
			// 类组件中通过this.props.xxx读取数据
			  <div>
				name:{this.props.name}
				<div>
				  age:{this.props.age}
				</div>
			  </div>
			</>
		)
	}
}

• 函数主组件给函数父组件传递props数据

function App(props) {
	return (
		<div>
		  这里是函数主组件
		  <Hello name='袁姗姗' age='18'/>
		</div>
	)
}

• 函数组件读取props数据

import React from 'react';
const Hello=(props)=>{
	return (
		<>
		// 函数组件通过参数props读取数据
		  <div>
			name:{props.name}
			  <div>
				age:{props.age}
			  </div>
		  </div>
		</>
	)
}

小结

1. props为外部数据，只允许使用的组件读取props外部数据，不允许写。因为这不符合React的规范，要修改数据，也只能由该props数据的主人来修改。
2. 若要修改props数据，可通过函数调用，在该props数据的主人的组件中对props进行修改。

3、state（内部数据）&setState

• 类组件中使用state&setState()

import React from 'react';
class B extends React.Component{
	constructor(props){
		super(props);
		this.state={
			n:0,
			user:{name:'frank',age:18}
		}
	}
	render(){
		<>
		  <div>
			 n:{this.state.n}
			 <hr/> 
			//  点击后触发n+1，但是触发this.state.n+=1页面则不会更新
			 <button onClick={this.setState((state)=>{return {n:this.state.n+1}})}>
			+1
			</button>
		  </div>
		  <div>
		 	user:{this.state.user} 
		  </div>
		</>
	}
}

• 函数组件使用state&setState()

React.useState详解传送门

import React from 'react';
const App=()=>{
	const [n,setN]=React.useState(0);
	// n就是初始值0，setN为操作初始值0的API
	return (
		<div>
		  n:{n}
		  <button onClick={()=>setN(i=>i+1)}>+1</button>
		</div>
	)
}

小结

1. this.state.n+=1无效？其实n值已经改变了，但是React不会去触发UI更新。只有调用setState才会触发更新，因为React没有像Vue一样对state进行代理监听。
2. setState是异步操作，即异步更新渲染页面，推荐使用setState(函数)的方式。函数表示对n的操作，如：setState(i=>i+1)
3. this.setState(this.state)不推荐？这是因为在React的理念中遵循不可变数据的思想，它不希望我们修改旧的state。常用代码：setState({n:this.state.n+1})
4. 在函数组件中，通过React.useState(initialState)来模拟使用state，也要通过setX()来更新UI，也是一个异步操作。

五、复杂state

1、类组件中的复杂state

• 类组件中有n和m

import React from 'react';
class A extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
      m: 0
    };
  }
  addN() {
    this.setState({ n: this.state.n + 1 });
    // m 会被覆盖为 undefined 吗？
  }
  addM() {
    this.setState({ m: this.state.m + 1 });
    // n 会被覆盖为 undefined 吗？
  }
  render() {
    return (
      <div>
         n: {this.state.n}
        <button onClick={() => this.addN()}>n+1</button>
        m: {this.state.m}
        <button onClick={() => this.addM()}>m+1</button>
      </div>
    );
  }
}

• 类组件中有对象user{}

import React from 'react';
class B extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
      m: 0,
      user: {
        name: "frank",
        age: 18
      }
    };
  }
  addN() {
    this.setState({ n: this.state.n + 1 });
    // m 会被覆盖为 undefined 吗？
  }
  addM() {
    this.setState({ m: this.state.m + 1 });
    // n 会被覆盖为 undefined 吗？
  }
  changeUser() {
    this.setState({
      // m 和 n 不会被置空
      user: {
		//   要想age不被置空=> ...this.state.user;
        name: "jack"
        // age 被置空
      }
    });
  }
  render() {
    return (
      <div>
        n: {this.state.n}
        <button onClick={() => this.addN()}>n+1</button>
        m: {this.state.m}
        <button onClick={() => this.addM()}>m+1</button>
        <hr />
        <div>user.name: {this.state.user.name}</div>
        <div>user.age: {this.state.user.age}</div>
        <button onClick={() => this.changeUser()}>change user</button>
      </div>
    );
  }
}

2、函数组件中的复杂state

• 函数组件里面有n和m

import React from 'react';
const C = () => {
  const [n, setN] = React.useState(0);
  const [m, setM] = React.useState(0);
  return (
    <div>
    	n:{n}
      <button onClick={() => setN(i=>i+1)}>n+1</button>
      m:{m}
      <button onClick={() => setM(i=>i+1)}>m+1</button>
    </div>
  );
};

• 函数组件中对象形式

import React from 'react';
const D = () => {
  const [state, setState] = React.useState({n:0,m:0});
  return (
    <div>
		n:{n}
		/* 注意，这个按钮会将m的值置空 */
      <button onClick={() => setState({n:state.n+1})}>n+1</button>
      m:{m}
      <button onClick={() => setM({...state,n:state.n+1})}>m+1</button>
    </div>
  );
};

小结

1. 类组件中的setState会自动合并第一层属性，但是并不会合并第二层及后面的属性。
2. 函数组件中的setX不会自动合并属性值。
3. 为了解决上面的问题，属性或值被置空。我们一般使用...操作符或者Object.assign中转。