react组件有哪些属性?

本教程操作环境:windows10系统、react16版,适用于所有品牌电脑。

React组件属性

props属性

react中说的单向数据流值说的就是props,根据这一特点它还有一个作用:组件之间的通信。props本身是不可变的,但是有一种情形它貌似可变,即是将父组件的state作为子组件的props,当父组件的state改变,子组件的props也跟着改变,其实它仍旧遵循了这一定律:props是不可更改的。

props属性的特点:

1.每个组件对象都会有props(properties的简写)属性

2.组件标签的所有属性都保存在props中

3.内部读取某个属性值:this.props.propertyName

4.作用:通过标签属性从组件外 向组件内传递数据(只读 read only)

5.对props中的属性值进行类型限制和必要性限制

代码示例

使用函数组件:

import React from 'react';
import ReactDOM from 'react-dom';

//使用函数组件
function User(props){
    //在组件中获取props属性值
    return <div>{props.name},{props.age}</div>
}

//定义数据
const person ={
    name:'张三',
    age:20,
    sex:'男'
}

ReactDOM.render(
    <User {...person}></User>
, document.getElementById('root'));

使用类组件:

import React from 'react';
import ReactDOM from 'react-dom';

//使用class组件
class User extends React.Component{
    render(){
        return (
    <div>{this.props.name}--{this.props.age}</div>
        );
    }
}

//数据
const person ={
    name:'张三',
    age:20,
    sex:'男'
}

ReactDOM.render(
    <User {...person}></User>
, document.getElementById('root'));

state 属性

React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。

React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。

代码示例:

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{
    //构造方法
    constructor(){
        super();
        this.state = {
            name: 'tom'
        }
    }

    render(){
        //state属性是可修改的
        this.state.name = 'jack';
        return (
        <h1>{this.state.name}</h1>
        );
    }
}

ReactDOM.render(<Person />, document.getElementById('root'));

设置状态:setState

setState(object nextState[, function callback])

不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。

setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑

props和state属性的区别

props中的数据都是外界传递过来的;

state中的数据都是组件私有的;(通过Ajax获取回来的数据,一般都是私有数据)

props中的数据都是只读的,不能重新赋值;

state中的数据,都是可读可写的;

子组件只能通过props传递数据;

refs 属性

在React数据流中,父子组件唯一的交流方式是通过props属性;如果要修改子组件,通过修改父组件的属性,更新达到子组件props属性的值,重新渲染组件以达到视图的更新。但是,有些场景需要获取某一个真实的DOM元素来交互,比如文本框的聚焦、触发强制动画等

  • 给DOM元素添加ref属性

  • 给类组件添加ref属性

代码示例:

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{

    constructor(){
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    //点击事件
    handleClick(){
        // 使用原生的 DOM API 获取焦点
        this.refs.myInput.focus();
    }

    render(){
        return (
            <div>
                <input type="text" ref="myInput" />
                <input
                    type="button"
                    value="点我输入框获取焦点"
                    onClick={this.handleClick}/>
            </div>
        );    
    }
}

ReactDOM.render(<Person />, document.getElementById('root'));

propTypes

用于进行props的类型检查;来自于prop-types库。

// V15.5之后
import PropTypes from 'prop-types';

该方法适用于函数组件和class组件。

如果使用了@babel/plugin-proposal-class-properties插件,

可以直接在组件内部作为静态属性。

class App extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired
  }
  render() {
    return(
      <div>{this.props.name}</div>
    )
  }
}

在组件(class组件和函数组件都适用)外部:

class App extends React.Component {
  render() {
    return(
      <div>{this.props.name}</div>
    )
  }
}
App.propTypes = {
  name: PropTypes.string.isRequired
}
// 函数组件
function App(props){
  return(
    <div>{props.name}</div>
  )
}
App.propTypes = {
  name: PropTypes.string.isRequired
}

defaultProps

组件的属性。用于给props属性赋初始值, 当属性值为undefined时生效,null不生效。

既可以在组件内部也可以在组件外部。

运行在propTypes类型检查前。

function App(props){
  return(
    <div>{props.name}</div>
  )
}
App.defaultProps = {
  name: "lyra"
}
ReactDOM.render(<App name={undefined} />, window.root)

displayName

用于React Devtools中显示组件的名称。

函数组件和类组件都可以使用。主要在高阶组件时比较有用。

function withSubscription(WrappedComponent) {
  class WithSubscription extends React.Component {/* ... */}
  WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
  return WithSubscription;
}

contextType

组件设置了该属性后,可以通过this.context访问context对象的值。

import {ThemeContext} from './theme-context';

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    let props = this.props;
    let theme = this.context; //最近的Provider提供的值
    return (
      <button
        {...props}
        style={{backgroundColor: theme.background}}
      />
    );
  }
}

export default ThemedButton;

以上就是react组件有哪些属性?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏