最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • 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组件。

    [email protected]/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组件有哪些属性?的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » react组件有哪些属性?
    • 257会员总数(位)
    • 5897资源总数(个)
    • 8本周发布(个)
    • 0 今日发布(个)
    • 538稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情