React-Props进阶-CFANZ编程社区

React-Props进阶_App

🌈个人主页：前端青山 🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来React篇专栏内容:React-Props进阶

1、children属性

2、props-type

3、默认值

state 和 props 有什么区别？

一、state

二、props

三、区别

1、children属性

在vue中对应的是插槽Slot（匿名插槽）。

children属性表示组件标签的子节点，当组件标签有子节点时，接受传值的子组件中的props里就会有该属性，与普通的props一样，其值可以使任意类型。

例如，在父组件中有如下代码：

import React, { Component } from "react";
import Cmp from './Components/Cmp'

class App extends Component {
    state = {
        content: "蚂蚁集团A股发行价确定",
    };
    render() {
        return <Cmp>{this.state.content}</Cmp>;
    }
}

export default App;

上述代码中的{this.state.content}即为子组件标签中的子节点，那么在子组件的props属性里就存在一个children属性可以被我们使用。如下：

import React, { Component } from "react";

class Cmp extends Component {
    render() {
        return <div>{this.props.children}</div>;
    }
}

export default Cmp;

需要注意，如果子组件标签里只存在一个子节点，则children属性值为一个字符串；如果子组件标签里存在多个子节点，那么children属性的值为一个索引数组。

简而言之，上述写法形式有点像Vue里的插槽，但是不是，children这一小结所讲的内容简单来说就是父传子的另外一种写法而已：原先父传子是将值写在了组件标签的属性中，只不过现在写在了组件标签里而已。

2、props-type

关于JavaScript的class中的静态成员与常规成员

class App {
    static uname = 'zhangsan'
    username = "lisi"
}
console.log((new App).username);
console.log(App.uname);
// 常规的属性是在对象里的，如果要用得先实例化
// 静态属性是类里面的，使用的时候不要实例化
// 静态成员要优先于常规的成员


new Vue({
  el: "#app",
  data() {
      return {}
  },
  // props: ["one","two"],
  props: {
      one: {
          type: String,
          default: "1",
      },
      two: {
          type: Number,
          default: 1,
      },
  },
})

React是为了构建大型应用程序而生，在一个大型应用开发过程中会进行多人协作，往往可能根本不知道别人使用你写的组件的时候会传入什么样的参数，这样就有可能会造成应用程序运行不了但是又不报错的情况。所以必须要对于props设传入的数据类型进行校验。

为了解决这个问题，React提供了一种机制，让写组件的人可以给组件的props设定参数检查，需要安装和使用prop-types：

# 现在的react的版本已经直接将其作为依赖，因此可以免于安装

npm i -S prop-types

在使用时，无论是函数组件还是类组件，都需要对prop-types进行导入：

import PropTypes from "prop-types"

随后依据使用的组件类型选择对应的应用方式，如果是函数组件则按照下面的方式应用：

function App(props){
    // 函数组件声明过程
    return "";
}
// 为App方法组件挂上验证规则
App.propTypes = {
    // 待验证的属性名：PropTypes.类型规则[.isRequired]
    propname:PropTypes.string,
    // ... 
}

如果是类组件则按照下面的方式应用：

class App extends Component{
    // 类内部完成检查
    static propTypes = {
       // 待验证的属性名：PropTypes.类型规则[.isRequired]
       prop-name:PropTypes.string
    }
    // 渲染
    render() {
        return "";
    }
}

本质上来上面类组件的写法与方法组件的写法是一样的，只不过考虑到类组件的代码完整性，我们把规则的验证做成了类的静态成员属性的方式，如果还原成最初的代码则如下：

class App extends Component {
    render() {
         return <div>{this.props.flag}--{this.props.num}</div>;
    }
}

App.propTypes = {
    flag: PropTypes.string,
    num: PropTypes.number.isRequired,
};

需要注意，isRequired规则必须放在最后且不能独立于其他规则存在。更多的验证规则，可以参考React官网。

3、默认值

如果props有属性没有传来数据，为了不让程序异常，我们可以依据业务情况给对应的属性设置默认值。

依据组件类型的不同选择对应的操作方式，如果是函数组件则采用如下方式：

function App(props){
    // 函数组件声明过程
    return "";
}
// 为App方法组件挂上默认值
App.defaultProps = {
    // 属性名：默认值
    title: "标题",
    // ...
}

如果使用的是类组件则使用如下方式：

class App extends Component {
    // 添加静态成员属性`defaultProps`设置props的默认值
    static defaultProps = {
        // 属性名：默认值
        title: "标题"
        // ...
    }
}

state 和 props 有什么区别？

React-Props进阶_javascript_02

一、state

一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是 state，一般在 constructor 中初始化

当需要修改里面的值的状态需要通过调用 setState 来改变，从而达到更新组件内部数据的作用，并且重新调用组件 render 方法，如下面的例子：

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 };
    });
  }

  render() {
    return (
      <button onClick={() => this.updateCount()}>
        Clicked {this.state.count} times
      </button>
    );
  }
}

setState 还可以接受第二个参数，它是一个函数，会在 setState 调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成

this.setState(
  {
    name: "青山",
  },
  () => console.log("setState finished")
);

二、props

React 的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件

组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是 props，所以可以把 props 理解为从外部传入组件内部的数据

react 具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据

props 除了可以传字符串，数字，还可以传递对象，数组甚至是回调函数，如下：

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

const element = <Welcome name="Sara" onNameChanged={this.handleName} />;

上述 name 属性与 onNameChanged 方法都能在子组件的 props 变量中访问

在子组件中，props 在内部不可变的，如果想要改变它看，只能通过外部组件传入新的 props 来重新渲染子组件，否则子组件的 props 和展示形式不会改变