react - state与props

官网地址:https://zh-hans.reactjs.org/docs/glossary.html#components(组件)

       https://zh-hans.reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class(state)

参考博客:https://blog.csdn.net/duola8789/article/details/90142891

state

1、简介(作用)

state(状态),是class的实例属性,是由组件本身管理的、用来跟踪数据发生变化状态改变的一种状态机(State Machine)

2、作用

控制本身的状态,完成对状态的行为控制、数据更新、界面渲染、记录自身数据变化等。简单的讲,就是记录内部状态

3、特性

可修改、可读

4、使用方式

(1)初始化方式

1)在constructor

添加一个class构造函数,然后在该函数中为this.state附初始值

class Clock extends React.Component { constructor(props) { // constructor 是一种用于创建和初始化class创建的对象的特殊方法 super(props); // super 继承父组件  this.state = {date: new Date()}; } render() { return ( >  >Hello, world!>  >It is {this.state.date.toLocaleTimeString()}.>  > ); } }

2)直接在Class中定义

class App extends React.Component {
  state = {
    loggedIn: false,
    currentState: "not-panic",
    someDefaultThing: this.props.whatever
  }

  render() {
    // whatever you like
  }
}

(2)调用方式

this.state.xxx

5、state正确使用方式

(1)不要直接修改 State

原因:不会重新渲染组件。  例:this.state.comment = 'Hello';   // Wrong

解决办法:使用setState。   例:this.setState({comment: 'Hello'});

(2)state的更新可能是异步的

React可能会将多个 setState 合并为一个调用。

因为 this.props 和 this.state 可能会异步更新,所以你不要依赖他们的值来更新下一个状态。

例如,此代码可能会无法更新计数器:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

解决办法:可以让setState接受一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数,将此次更新被应用时的 props 做为第二个参数。

// Correct  &&  箭头函数
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

// Correct  &&  普通函数
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

(3)state的更新会被合并

当你调用setState时, React会把你提供的对象合并到当前的state

  例,你的state 包含几个独立的变量:

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

然后你可以分别调用 setState() 来单独地更新它们:

componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

这里的合并是浅合并,所以 this.setState({comments}) 完整保留了 this.state.posts, 但是完全替换了 this.state.comments

6、缺点

(1)带来管理的复杂性;

解决办法:

1)尽量多地写无状态组件,如此可降低代码维护的难度,也会在一定程度上增强组件的可复用性;

2)尽量编写函数式组件,函数式组件只有props没有state

props

1、简介

props,是React组件输入,父组件向子组件传递数据的媒介。

2、作用

用来父组件向子组件传递数据(定义外部接口)

3、特性

只读,不可修改

例:props.number = 42;  // 报错

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

4、使用方式

(1)函数组件

    function Welcome(props) {
      return 

Hello, {props.name}

; }

  函数组件中,使用props方式是:props.xxx

(2)类组件

class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {date: new Date()};
    }

    render() {
         return 

Hello, {this.props.name}

; } }

类组件中,使用props的方式是:this.props.xxx

5、props.children

  每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。

例:

Hello world!

在 Welcome 组件中获取 props.children,就可以得到字符串 Hello world!

function Welcome(props) {
  return 

{props.children}

; }

对于 class 组件,请使用 this.props.children 来获取:

class Welcome extends React.Component {
  render() {
    return 

{this.props.children}

; } }

6、缺点

缺点:当父组件的传递的数据发生更新的时候不能更新到页面上

解决方法:

(1)componentWillReceiveProps  在组件接收到一个新的 props (更新后)时被调用。这个方法在初始化render时不会被调用。

(2)componentWillUpdate  在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

注意:如果父组件传递过来的数据会发生更新,建议将props值的赋值给state,props发生更新就执行setState,及时更新页面。

如果父组件传递过来的数据不会发生更新,不建议将props的值赋给state,易发生数据混乱

 

你可能感兴趣的