React 定义组件参数

最新推荐文章于 2024-07-21 18:07:43 发布
最新推荐文章于 2024-07-21 18:07:43 发布
阅读量732 收藏
点赞数 2


原文地址：http://itbilu.com/JavaScript/React/4JIk-Q7Yl.html

使用React.createClass()方法创建组件时，需要传入一个参数对象，React会根据这个对象创建组件。这个参数对象中，除了包含必须要实现的render方法外，还有一些组件的设置属性。组件生命周期中的一些处理函数，也是在这个对象中定义的。


  1. 组件的定义
  2. 定义组件的参数
  3. 定义组件的参数-生命周期


1. 组件的定义

我们在之前介绍过，定义一个组件，语法结构如下：

ReactClass createClass(object specification)

定义组件时，传了一个表示参数说明（参数规格）的specification对象。

如，定义一个组件：

var App = React.createClass({
  displayName: 'App',
  render: function () {
    return (
      <h1>itbilu.com</h1>
    )
  }
});
返回值是一个包含单一了级的组件（ ReactComponent ）

在上面的示例中，我们在specification对象中定义了一个render方法，该方法是必须实现的方法。除render方法外，还定义一个displayName属性。

specification对象中还可以定义更多的属性，这其中包括组件的生命周期参数，参数详细说明如下。


2. 定义组件的参数

2.1 渲染组件：render
ReactComponent render()
  • 返回值：React组件（ReactComponent）

render()方法会根据组件的this.props和this.state属性的改，渲染或重新渲染一个组件。React会对比其返回的ReactComponent，并判断是否将其渲染到DOM中。

其返回值是一个单子级的组件，该组件可以是虚拟的本地DOM（如：<div/> 或 React.DOM.div()），也可以是自定义的复合组件。当不需要返回任何东西时，可以返回null或false。

render()应该是一个纯粹函数，即：不使用组件的state，每次调用都返回同样的结果，不读写DOM，不与浏览器交互，只做最单纯的渲染。当需要修改状态或有交互时，应该在componentDidMount等组件生命周期函数中进行。


2.2 调试输出：displayName
string displayName

displayName属性用于组件调试时输出显示，JSX自动设置该值，可以理解为调试时显示的组件名。


2.3 跨组件共享：mixins
array mixins
mixin属性是一个数组，通过该数组可以共享一些复杂组件间的共用功能。

如，一个组件需要定期更新，这时我们可以setInterval()方法很容易的做到，但当不需要它时，我们要取消定时器以节省内存。下面我们使用 React 提供的生命周期方法来通知组件创建或销毁时间，并结合mixin，实现组件的定时清理（mixins.html）：

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.map(clearInterval);
  }
};

var TickTock = React.createClass({
  mixins: [SetIntervalMixin], // 引用 mixin
  getInitialState: function() {
    return {seconds: 0};
  },
  componentDidMount: function() {
    this.setInterval(this.tick, 1000); // 调用 mixin 的方法
  },
  tick: function() {
    this.setState({seconds: this.state.seconds + 1});
  },
  render: function() {
    return (
      <p>
        React 已经运行了 {this.state.seconds} 秒。
      </p>
    );
  }
});

React.render(
  <TickTock />,
  document.getElementById('example')
);


2.4 验证对象：propTypes
object propTypes

propTypes是React提供的一种验证机制，该对象中定义了一系列的验证方法，可对props进行验证。组件初始化时，如果传递的props属性和propTypes不匹配，则会打印一个console.warn日志。

React.createClass({
  propTypes: {
  	// 验证布尔值
    optionalBool: React.PropTypes.bool,
    // 验证是一个函数
    optionalFunc: React.PropTypes.func,
    // 验证是数字
    optionalNumber: React.PropTypes.number,
    // 自定义验证器，验证失败需要返回一个 Error 对象。不要直接
    // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      //自定义的验证方法
      ……
    }
    // 其它验证
    ……
  },
  /* 其它specification... */
});

propTypes使用示例（propTypes.html）：

var App = React.createClass({
  propTypes: {
    site: React.PropTypes.shape({
      domain: React.PropTypes.string.isRequired,
      name: React.PropTypes.string
    }).isRequired
  },
  render: function() {
    return (
      <p>
        站点信息－{this.props.site.name}：{this.props.site.domain}
      </p>
    );
  }
});

var site = {
  name: 4,  // 不合法的类型
  domain: 'itbilu.com'
}
ReactDOM.render(
  <App site={site} />,
  document.getElementById('example')
);

// 运行后会抛出以下错误
// Warning: Failed propType: Invalid prop `site.name` of type `number` supplied to `App`, expected `string`.


2.5 静态方法对象：statics
object statics

statics对象使你可以定义一些静态方法，这些静态方法可以直接在组件上调用。如statics.html）：

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true

在statics中定义的方法都是静态方法，所以你可以组件实例创建之前调用，这也意味着不能获取组件的 在这个块儿里面定义的方法都是静态的，意味着你可以在任何组件实例创建之前调用它们，这些方法不能获取组件的props和state，如果需要在静态方法中使用props和state，则要在调用时做为参数传入。


3. 定义组件的参数-生命周期

生命周期相关参数，是React定义组件时提供的一系列处理函数（钓子函数），这些函数会在组件生命周期的某个阶段调用。

3.1 创建期：getDefaultProps
object getDefaultProps()


3.2 创建期：getInitialState
object getInitialState()

在组件挂载前（即：创建期）调用一次，其返回值将做为this.state的初始值。

getInitialState()方法会组件类创建的时候调用一次，其返回值会被缓存下来。该方法用于设置props属性的默认值，但仅对于非必须属性。如果父组件没有指定props中的某个值，此返回对象中的相应属性将会合并到this.props。

getInitialState()方法会在组件实例创建前调用，这时还不能使用this.props属性，且其返回对象是在所有实例间共享的。


3.3 创建期：componentWillMount
componentWillMount()

componentWillMount()服务器端和客户端都只调用一次，在初始化渲染执行之前被调用。如果在这个方法内调用setState()方法，render()方法将会收到更新后的state，也就是说这是我做在组件渲染前最后一个修改state的机会。


3.4 创建期：componentDidMount
componentDidMount()

componentDidMount()会在组件初始化（渲染完成）后立即调用一次，我们一般在这个方法中使用this.getDOMNode()方法访问原始DOM。


3.5 存在期：componentWillReceiveProps
componentWillReceiveProps(object nextProps)

componentWillReceiveProps()方法会在组件生命周期的存在期调用，当组件感知到props属性改变会，会调用此方法。render()方法将会在其后调用，这时我们可以通过this.setState()来阻止组件的再次渲染。


3.6 存在期：shouldComponentUpdate
boolean shouldComponentUpdate(object nextProps, object nextState)

shouldComponentUpdate()方法发生在组件生命周期的存在器，在组件收到新的props或state。在这个方法中，我们可以访问组件的props和state属性，通过这两个属性可以确认组件是否需要更新，如果不需要更新，则返回false，则其后的方法将不会在执行。如：

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}


3.7 存在期：componentWillUpdate
componentWillUpdate(object nextProps, object nextState)

componentWillUpdate()会在收到新的props或state后调用，类似componentWillMount()。


3.8 存在期：componentDidUpdate
componentDidUpdate(object prevProps, object prevState)

componentDidUpdate()会在组件重新渲染后立即被调用，当我们需要在组件重新渲染后操作DOM则需要使用这个方法。


3.9 销毁&清理期：componentWillUnmount
componentWillUnmount()

componentWillUnmount()是组件销毁&清理期唯一调用的方法，它会在组件从DOM中移除时被调用，这时我们可以清理一些状态或清理在componentDidMount中创建的DOM元素。


原文地址：http://itbilu.com/JavaScript/React/4JIk-Q7Yl.html

使用React.createClass()方法创建组件时，需要传入一个参数对象，React会根据这个对象创建组件。这个参数对象中，除了包含必须要实现的render方法外，还有一些组件的设置属性。组件生命周期中的一些处理函数，也是在这个对象中定义的。


  1. 组件的定义
  2. 定义组件的参数
  3. 定义组件的参数-生命周期


1. 组件的定义

我们在之前介绍过，定义一个组件，语法结构如下：

ReactClass createClass(object specification)

定义组件时，传了一个表示参数说明（参数规格）的specification对象。

如，定义一个组件：

var App = React.createClass({
  displayName: 'App',
  render: function () {
    return (
      <h1>itbilu.com</h1>
    )
  }
});
返回值是一个包含单一了级的组件（ ReactComponent ）

在上面的示例中，我们在specification对象中定义了一个render方法，该方法是必须实现的方法。除render方法外，还定义一个displayName属性。

specification对象中还可以定义更多的属性，这其中包括组件的生命周期参数，参数详细说明如下。


2. 定义组件的参数

2.1 渲染组件：render
ReactComponent render()
  • 返回值：React组件（ReactComponent）

render()方法会根据组件的this.props和this.state属性的改，渲染或重新渲染一个组件。React会对比其返回的ReactComponent，并判断是否将其渲染到DOM中。

其返回值是一个单子级的组件，该组件可以是虚拟的本地DOM（如：<div/> 或 React.DOM.div()），也可以是自定义的复合组件。当不需要返回任何东西时，可以返回null或false。

render()应该是一个纯粹函数，即：不使用组件的state，每次调用都返回同样的结果，不读写DOM，不与浏览器交互，只做最单纯的渲染。当需要修改状态或有交互时，应该在componentDidMount等组件生命周期函数中进行。


2.2 调试输出：displayName
string displayName

displayName属性用于组件调试时输出显示，JSX自动设置该值，可以理解为调试时显示的组件名。


2.3 跨组件共享：mixins
array mixins
mixin属性是一个数组，通过该数组可以共享一些复杂组件间的共用功能。

如，一个组件需要定期更新，这时我们可以setInterval()方法很容易的做到，但当不需要它时，我们要取消定时器以节省内存。下面我们使用 React 提供的生命周期方法来通知组件创建或销毁时间，并结合mixin，实现组件的定时清理（mixins.html）：

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.map(clearInterval);
  }
};

var TickTock = React.createClass({
  mixins: [SetIntervalMixin], // 引用 mixin
  getInitialState: function() {
    return {seconds: 0};
  },
  componentDidMount: function() {
    this.setInterval(this.tick, 1000); // 调用 mixin 的方法
  },
  tick: function() {
    this.setState({seconds: this.state.seconds + 1});
  },
  render: function() {
    return (
      <p>
        React 已经运行了 {this.state.seconds} 秒。
      </p>
    );
  }
});

React.render(
  <TickTock />,
  document.getElementById('example')
);


2.4 验证对象：propTypes
object propTypes

propTypes是React提供的一种验证机制，该对象中定义了一系列的验证方法，可对props进行验证。组件初始化时，如果传递的props属性和propTypes不匹配，则会打印一个console.warn日志。

React.createClass({
  propTypes: {
  	// 验证布尔值
    optionalBool: React.PropTypes.bool,
    // 验证是一个函数
    optionalFunc: React.PropTypes.func,
    // 验证是数字
    optionalNumber: React.PropTypes.number,
    // 自定义验证器，验证失败需要返回一个 Error 对象。不要直接
    // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      //自定义的验证方法
      ……
    }
    // 其它验证
    ……
  },
  /* 其它specification... */
});

propTypes使用示例（propTypes.html）：

var App = React.createClass({
  propTypes: {
    site: React.PropTypes.shape({
      domain: React.PropTypes.string.isRequired,
      name: React.PropTypes.string
    }).isRequired
  },
  render: function() {
    return (
      <p>
        站点信息－{this.props.site.name}：{this.props.site.domain}
      </p>
    );
  }
});

var site = {
  name: 4,  // 不合法的类型
  domain: 'itbilu.com'
}
ReactDOM.render(
  <App site={site} />,
  document.getElementById('example')
);

// 运行后会抛出以下错误
// Warning: Failed propType: Invalid prop `site.name` of type `number` supplied to `App`, expected `string`.


2.5 静态方法对象：statics
object statics

statics对象使你可以定义一些静态方法，这些静态方法可以直接在组件上调用。如statics.html）：

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true

在statics中定义的方法都是静态方法，所以你可以组件实例创建之前调用，这也意味着不能获取组件的 在这个块儿里面定义的方法都是静态的，意味着你可以在任何组件实例创建之前调用它们，这些方法不能获取组件的props和state，如果需要在静态方法中使用props和state，则要在调用时做为参数传入。


3. 定义组件的参数-生命周期

生命周期相关参数，是React定义组件时提供的一系列处理函数（钓子函数），这些函数会在组件生命周期的某个阶段调用。

3.1 创建期：getDefaultProps
object getDefaultProps()


3.2 创建期：getInitialState
object getInitialState()

在组件挂载前（即：创建期）调用一次，其返回值将做为this.state的初始值。

getInitialState()方法会组件类创建的时候调用一次，其返回值会被缓存下来。该方法用于设置props属性的默认值，但仅对于非必须属性。如果父组件没有指定props中的某个值，此返回对象中的相应属性将会合并到this.props。

getInitialState()方法会在组件实例创建前调用，这时还不能使用this.props属性，且其返回对象是在所有实例间共享的。


3.3 创建期：componentWillMount
componentWillMount()

componentWillMount()服务器端和客户端都只调用一次，在初始化渲染执行之前被调用。如果在这个方法内调用setState()方法，render()方法将会收到更新后的state，也就是说这是我做在组件渲染前最后一个修改state的机会。


3.4 创建期：componentDidMount
componentDidMount()

componentDidMount()会在组件初始化（渲染完成）后立即调用一次，我们一般在这个方法中使用this.getDOMNode()方法访问原始DOM。


3.5 存在期：componentWillReceiveProps
componentWillReceiveProps(object nextProps)

componentWillReceiveProps()方法会在组件生命周期的存在期调用，当组件感知到props属性改变会，会调用此方法。render()方法将会在其后调用，这时我们可以通过this.setState()来阻止组件的再次渲染。


3.6 存在期：shouldComponentUpdate
boolean shouldComponentUpdate(object nextProps, object nextState)

shouldComponentUpdate()方法发生在组件生命周期的存在器，在组件收到新的props或state。在这个方法中，我们可以访问组件的props和state属性，通过这两个属性可以确认组件是否需要更新，如果不需要更新，则返回false，则其后的方法将不会在执行。如：

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}


3.7 存在期：componentWillUpdate
componentWillUpdate(object nextProps, object nextState)

componentWillUpdate()会在收到新的props或state后调用，类似componentWillMount()。


3.8 存在期：componentDidUpdate
componentDidUpdate(object prevProps, object prevState)

componentDidUpdate()会在组件重新渲染后立即被调用，当我们需要在组件重新渲染后操作DOM则需要使用这个方法。


3.9 销毁&清理期：componentWillUnmount
componentWillUnmount()

componentWillUnmount()是组件销毁&清理期唯一调用的方法，它会在组件从DOM中移除时被调用，这时我们可以清理一些状态或清理在componentDidMount中创建的DOM元素。


杰克辣舞
关注
基于react组件之间的参数传递(详解)
08-29
下面小编就为大家带来一篇基于react组件之间的参数传递(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React 定义组件的参数对象
热门推荐
09-09 1万+
原文地址：http://itbilu.com/javascript/react/4JIk-Q7Yl.html 使用React.createClass()方法创建组件时，需要传入一个参数对象，React会根据这个对象创建组件。这个参数对象中，除了包含必须要实现的render方法外，还有一些组件的设置属性。组件生命周期中的一些处理函数，也是在这个对象中定义的。 组件的定义定
React引用子组件、定义参数和方法
chijiajing的博客
10-16 1952
导入插件 gulp-webpack jsx-loader react-dom react gulp-concat browser-sync gulp 完成数据结构 创建gulpfile.js var concat=require("gulp-concat"); var webpack=require("gulp-webpack"); var react=require("react"); v...
react篇章-React 组件-向组件传递参数
weixin_34314962的博客
02-21 276
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.develop...
React学习笔记（2）—— React组件、参数及状态的使用
huzhenv5的博客
12-31 332
组件 react组件的基本写法如下： class 自定义名字 extends React.Component{ render { return 要渲染的html内容 } } 注意：自定义的名字，必须首字母大写，否则虽然不会报错，自定义标签也不会进行渲染 比如定义一个名字为Huz的组件，显示一个红颜色的"hello react"标签，写法如下： // 继承react的组件 class ...
react 兄弟组件如何调用对方的方法示例
10-17
2. 在父组件Home中，定义onRef函数，该函数接收一个ref参数，并将其存储为组件的一个属性（例如child1）。这样，父组件就可以持有对Child1组件的引用。 3. 在父组件的渲染方法中，将onRef函数作为prop传递给Child1...
React面向组件编程（定义组件，组件三大核心属性，组件事件处理、组件收集表单数据、高阶函数和函数的柯里化）
weixin_52984349的博客
10-29 1434
React面向组件编程（定义组件，组件三大核心属性，组件事件处理、组件收集表单数据、高阶函数和函数的柯里化）
React 函数组件 link传递参数，props接收参数
weixin_43963525的博客
01-06 1900
函数组件传递参数和接收值
react 父子组件之间通讯props
10-18
在React中，props是组件的属性，相当于在HTML标签中使用属性来设置各种参数，props用于在父组件向子组件传递数据。子组件通过props接收数据，但不能修改这些数据，因为props是不可变的（immutable）。 父组件向子...
【React】react组件传参
m0_61049675的博客
02-02 2110
在任意组件外调用 createContext 创建一个上下文，createContext 返回一个上下文对象useContext： 是一个 React Hook，可以让你读取和订阅组件中的 context。//创建 context对象//createContext 参数 可以进行初始化操作//Child子组件//const 公共数据 = useContext(Context) 这里的公共数据就是根组件value的值我的子页面颜色值是：{color}
React中用函数定义组件时，参数为props和形如{name，title}的区别
wang_xiaoniao的博客
07-17 1097
在学习React的过程中，用函数定义组件时，碰到了下面这种情况。函数组件的参数不为props，而是{aaa,bbb}这样的形式，并且这个定义的方式是正确的。这令我费解，它和props本身有什么关系吗？这种定义方式和常规定义有什么不同吗？ 根据我的理解，正常定义函数组件时，形式应如下图所示： 翻阅React文档后，只找到下面这句话和问题有些相关： 函数组件接收唯一带有数据的 “props”（代表属性）对象，并返回一个 React 元素 根据前半句话，我的猜测是这样的： 因为函数组件只能接收一个参数pr
React--react方法传自定义参数
最新发布
weixin_46520767的博客
07-21 341
在React中传递自定义参数到事件处理函数时，使用箭头函数 () => 方法() 的方式是为了确保事件处理函数在事件发生时才执行，而不是在组件渲染时就立即执行。具体原因如下：
react组件参数传递
webblock的博客
04-17 908
准备工作 1、创建react项目 npm i create-react-app -g create-react-app myadmin //myadmin你的项目名称 2、在你项目的src文件夹中创建pages文件夹，pages文件夹下创建Context文件夹，然后在Context的文件夹下创建Child.js、index.js、Son.js三个文件 3、开始 在index.js文件中导入参数的类...
react组件之间的参数传递
weixin_33881753的博客
09-04 150
1、父组件向子组件传递参数 class Child extends Component {　　　 componentDidMount(){　　　 　　let name = this.props.default;　　　　　 console,log(name);　　　 }　　　 render(){　　　　　 const { default} = this.props;　　　 　　return (...
React：组件传参
卡卡西：一个擅长拷贝的前端程序员
04-24 4414
react：组件传参数
React 组件之间传递参数
datouniao1的博客
11-27 1883
其实react组件之间传递参数是比较简单的，组件传入参数的一种方式，参数作为组件的一个属性，在组件的的构造函数的props中就能看到这个属性对应的值
【学习前端第七十三课】React组件内部数据定义
weixin_65729202的博客
01-22 879
React组件中的数据称之为状态state, 而定义数据其实就在组件内部创建一个state对象来管理储存数据但是, 因为React组件有两种写法，分别是类式组件和函数式组件，而这两种组件最大的区别就是有无状态和生命周期, 而函数式组件是没有状态也没有生命周期, 所以也称无状态组件, 所以我们这里先从类式组件开始学习在components内新建two.jsx setState方法 通过上面的changeNum方法执行,我们可以看到一个情况, 我们通过setState修改了数据,但是紧接着打印的num却是修改
react组件传参
FantasyBreaker的博客
03-08 2350
1.父子传参 在父组件里引入的子组件上进行传值 <child delete={this.ids} data={this.state.data} /> 子组件中this.props.data引用data属性；this.props.delete(ids)引用delete方法并传参。 2.pubsub 发布订阅 在一个组件中发布 Pubsub.publish("username", value); 在另一个组件中订阅 Pubsub.subsribe("username", data) 3.通过r
React父子组件间传值详解及示例
子组件在渲染时绑定了`getsonToPar`函数到子组件按钮的`onClick`事件，当点击按钮时，子组件的状态`msg`会作为参数传递给父组件的`sonToPar`方法。 3. **利用回调函数或自定义事件**: - 子组件可以将处理函数作为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值