• 本教程总共5篇,每日更新一篇...1.React 技巧1(状态组件无状态组件使用) ----2018.01.04 2.React 技巧2(避免意义的父节点)----2018.01.05 3.React 技巧3(如何优雅的渲染一个List)----2018.01.06



    本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!


    1.React 技巧1(状态组件与无状态组件的使用) ----2018.01.04


    2.React 技巧2(避免无意义的父节点)----2018.01.05


    3.React 技巧3(如何优雅的渲染一个List)----2018.01.06


    4.React 技巧4(如何处理List里面的Item)----2018.01.07


    5.React 技巧5(TodoList实现)----2018.01.08


    开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2


    我们开发的时候或许会遇到这样的问题?

    什么是React状态组件和无状态组件?

    什么时候使用React状态组件?

    什么时候使用React无状态组件?

     

    我在刚学习的时候,就比较傻,不管什么情况都使用状态组件,这样当然也行,也不会出错!但是作为一名有责任心的程序猿,虽然外表屌丝,但内心还是很极客的!那我们如何优雅的书写React组件呢?

     

    React状态组件?

    顾名思义该组件有状态,有状态就有对应的UI 变化!

    如果你的UI 不需要变化,请不要使用 状态组件!

     

    如下就是典型的官方提供的一个状态组件

    因为这是一个计数器,他是不断增长变化的,只要UI变化,那么就需要用到状态组件!

     

    React无状态组件?

    那么什么时候用无状态组件呢?

    就是组件本身不需要负责UI变化,不包括子组件

    回过头看我们之前的Index.jsx,Shop.jsx

     

    可能新手一开始,困难的地方就是在于如何规划组件,怎么写?

    这就需要你多写,慢慢去理解!送大家一句话,React:万物皆组件!

    只要你的代码,相同的地方出现两次,我觉得你就要考虑把他做成组件,因为这样做不但好维护,也节省代码量!


    如果遇到这种情况,如何组织

    有三段一样的代码?

    按照设计原则,我们需要把他做成组件!

    我们可以这样做,但这样做不是最好的!我们改造下!

    我们新建 SecondsBottom.jsx 无状态组件

    import React from 'react';

    const SecondsBottom = ({seconds}) =>
    <div className="bottom">
           Seconds: {seconds}
    </div>
    ;

    export default SecondsBottom;

    修改 Seconds.jsx 写法

    render() {
    let state = this.state;
       return (
    <div className="cont">
               <div className="top">
                   <i className="bd_logo1"/>
                   这是{this.props.title}
    </div>
               {/*这里我写了三中传值方法*/}
    <SecondsBottom seconds={this.state.seconds}/>
               <SecondsBottom seconds={state.seconds}/>
               <SecondsBottom {...state}/>
           </div>
       );
    }

    如果你需要在无状态组件里写一些逻辑判断呢?

    比如:seconds小于等于5 显示一种样式,大于5 又显示另一种样式

    import React from 'react';

    const SecondsBottom = ({seconds}) => {
    if (seconds < 5) {
    return (
    <div className="bottom">
                   小于5的Seconds: {seconds}
    </div>
           )
    } else {
    return (
    <div className="bottom">
                   大于5的Seconds: {seconds}
    </div>
           )
    }
    };

    export default SecondsBottom;


    当然你页可以用三元表达式来写!

    import React from 'react';

    const SecondsBottom = ({seconds}) =>
    <div className="bottom">
           {seconds <= 5 ? "小于等于5的" : " 大于5"}的Seconds: {seconds}
    </div>
    ;
    export default SecondsBottom;


    最终效果!!!!



    本文完 

    禁止擅自转载,如需转载请在公众号中留言联系我们!

    感谢童鞋们支持!

    如果你有什么问题,可以在下方留言给我们!



    本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!


    1.React 技巧1(状态组件与无状态组件的使用) ----2018.01.04


    2.React 技巧2(避免无意义的父节点)----2018.01.05


    3.React 技巧3(如何优雅的渲染一个List)----2018.01.06


    4.React 技巧4(如何处理List里面的Item)----2018.01.07


    5.React 技巧5(TodoList实现)----2018.01.08


    开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2


    我们开发的时候或许会遇到这样的问题?

    什么是React状态组件和无状态组件?

    什么时候使用React状态组件?

    什么时候使用React无状态组件?

     

    我在刚学习的时候,就比较傻,不管什么情况都使用状态组件,这样当然也行,也不会出错!但是作为一名有责任心的程序猿,虽然外表屌丝,但内心还是很极客的!那我们如何优雅的书写React组件呢?

     

    React状态组件?

    顾名思义该组件有状态,有状态就有对应的UI 变化!

    如果你的UI 不需要变化,请不要使用 状态组件!

     

    如下就是典型的官方提供的一个状态组件

    因为这是一个计数器,他是不断增长变化的,只要UI变化,那么就需要用到状态组件!

     

    React无状态组件?

    那么什么时候用无状态组件呢?

    就是组件本身不需要负责UI变化,不包括子组件

    回过头看我们之前的Index.jsx,Shop.jsx

     

    可能新手一开始,困难的地方就是在于如何规划组件,怎么写?

    这就需要你多写,慢慢去理解!送大家一句话,React:万物皆组件!

    只要你的代码,相同的地方出现两次,我觉得你就要考虑把他做成组件,因为这样做不但好维护,也节省代码量!


    如果遇到这种情况,如何组织

    有三段一样的代码?

    按照设计原则,我们需要把他做成组件!

    我们可以这样做,但这样做不是最好的!我们改造下!

    我们新建 SecondsBottom.jsx 无状态组件

    import React from 'react';

    const SecondsBottom = ({seconds}) =>
    <div className="bottom">
           Seconds: {seconds}
    </div>
    ;

    export default SecondsBottom;

    修改 Seconds.jsx 写法

    render() {
    let state = this.state;
       return (
    <div className="cont">
               <div className="top">
                   <i className="bd_logo1"/>
                   这是{this.props.title}
    </div>
               {/*这里我写了三中传值方法*/}
    <SecondsBottom seconds={this.state.seconds}/>
               <SecondsBottom seconds={state.seconds}/>
               <SecondsBottom {...state}/>
           </div>
       );
    }

    如果你需要在无状态组件里写一些逻辑判断呢?

    比如:seconds小于等于5 显示一种样式,大于5 又显示另一种样式

    import React from 'react';

    const SecondsBottom = ({seconds}) => {
    if (seconds < 5) {
    return (
    <div className="bottom">
                   小于5的Seconds: {seconds}
    </div>
           )
    } else {
    return (
    <div className="bottom">
                   大于5的Seconds: {seconds}
    </div>
           )
    }
    };

    export default SecondsBottom;


    当然你页可以用三元表达式来写!

    import React from 'react';

    const SecondsBottom = ({seconds}) =>
    <div className="bottom">
           {seconds <= 5 ? "小于等于5的" : " 大于5"}的Seconds: {seconds}
    </div>
    ;
    export default SecondsBottom;


    最终效果!!!!



    本文完 

    禁止擅自转载,如需转载请在公众号中留言联系我们!

    感谢童鞋们支持!

    如果你有什么问题,可以在下方留言给我们!


    展开全文
  • React项目中,组件一般分为无状态组件和有状态组件 无状态组件 纯展示组件,负责展示props中的数据,没有自身的state,更不涉及到state的修改。 无状态组件一般使用函数式定义的方法实现 function Hello(props){ ...

    在React项目中,组件一般分为无状态组件和有状态组件

    无状态组件

    纯展示组件,负责展示props中的数据,没有自身的state,更不涉及到state的修改。
    无状态组件一般使用函数式定义的方法实现

     function Hello(props){
       return(
         <div>
            <p>哈哈哈,无状态组件</p>
            <h3>{props.name},你好</h3>
         </div>
       )
     }
    
    ReactDOM.render(
       <Hello  name="哄哄" />,
       document.getElementById("example")
    )
    

    无状态组件的几个特点

    1. 不会被实例化,整体渲染性能得到提升
    2. 组件内不能访问this对象
    3. 没有生命周期方法
    4. 没有state,只有传过来的props

    有状态组件

    组件内部,有自己的state,可以对state进行改动,同样也能接收传过来的props 。
    有状态组件,一般使用React.Compontent 实现:

    class Hello extends React.Component{
      constructor(props){
        super();
        this.state={
           flag:false,
           name:props.name
        }
      }
      render(){
        return(
            <div>
              <p>哈哈哈,无状态组件</p>
              <h3>{this.state.name},你好</h3>
            </div>
        )
      }
    }
    

    有状态组件中的 成员函数需要手动绑定this,否则无法访问this对象
    this:当前组件的实例对象

    一般有以下三种方法

    (1)在构造函数中 使用bind绑定this

    class Hello extends React.Component{
      constructor(){
          super();
          this.goBackFn=this.goBackFn.bind(this)// 绑定this
       }
    }
    

    (2) 调用时 使用bind 绑定this

    <button onClick={this.goBackFn.bind(this)}>点我啊</button>
    

    (3)调用时使用箭头函数

    <button onClick={()=>this.goBackFn()}>点我啊</button>
    

    React.Component 和React.PureComponent

    这两个都用于创建组件,几乎完全一致
    不同点:React.PureComponent 会

    展开全文
  • React中的组件主要分为无状态组件和有状态组件两类。 1,无状态组件主要用来定义模板,接收来自父组件props传递过来的数据,使用{props.xxx}的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性,以便于...

    React中的组件主要分为无状态组件和有状态组件两类。

    1,无状态组件主要用来定义模板,接收来自父组件props传递过来的数据,使用{props.xxx}的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性,以便于组件复用。创建无状态组件如下:

    var Header = (props) = (
        <div>{props.xxx}</div>
    );
    export default Header 
    

    2,有状态组件主要用来定义交互逻辑和业务数据(如果用了Redux,可以把业务数据抽离出去统一管理),使用{this.state.xxx}的表达式把业务数据挂载到容器组件的实例上(有状态组件也可以叫做容器组件,无状态组件也可以叫做展示组件),然后传递props到展示组件,展示组件接收到props,把props塞到模板里面。创建有状态组件如下:

    class Home extends React.Component {
        constructor(props) {
            super(props);
        };
        render() {
            return (
                <Header/>  //也可以写成<Header></Header>
            )
        }
    }
    export default Home 
    
    这个是官方默认的写法,在构造函数里面默认要传递一个参数进去,并且要调用super()方法,来获取子类的实例。但是比较疑惑的地方是为什么要传递这些参数,传递这些参数有什么用?

    因为从render()里面的组件来看,构造函数不传递参数也可以获取到组件实例上的props属性。如下:

    class Home extends React.Component {
        constructor() {
            super();
        };
        render (){
            return(
                <div>
                    <Header name="俺是子组件实例上props属性"/>
                </div>
            );
        };
    };
    
    class Header extends React.Component {
        constructor() {
            super();
        };
        render() {
            return (
                <div>{this.props.name}</div>  //构造函数中并没有传递props属性,这里通过{this.props.name}依然获取到了值
            );
        };
    };
    
    

    这个比较好理解,因为render()方法是子组件原型上的方法,获取实例属性的时候要通过this来访问,如果去掉this就获取不到了。

    那问题来了,如果我们要在构造函数中访问props改怎么办呢?此时,我们就要在constructor构造函数中传递一个props参数,这样就可以访问到子组件实例上的props属性了。如下:

    class Header extends React.Component {
        constructor(props) {
            super();
            this.name = props.name;  //获取到子组件实例上的props.name属性,赋值给实例属性name
        };
        render() {
            return (
                <div>{this.name}</div>
            );
        };
    };
    

    还有一个问题,super(props)方法中为什么也要传递一个props属性呢?看下面的例子:

    class Header extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                nameOne: props.name,
                nameTwo: this.props.name  //super()方法中传递了props属性,this.props才可以获取到name属性
            }
        };
        render() {
            return (
                <div>{this.state.nameOne}{this.state.nameTwo}</div>
            );
        };
    };
    
    

    其实,props.name和this.props.name的值都是一样的,但是它俩还是有区别的,props.name中这个props就是子组件的属性props,但是this.props.name中的这个props却不是子组件的属性props,虽然值都是一样的,这个props其实在调用super方法的时候被传递到了Component这个父类中去了,所以this.props.name获取到的是Component父类中的props属性。看下React的源码:
    在这里插入图片描述
    发现没,子类super方法把props参数传递给了父类Component,Component把props参数挂载到它的实例属性props上了。所以,你只有给super方法中传递props参数,在构造函数里才能用this,props.xxx

    如果super方法中不传递props参数,获取this.props.name的值就会报错。获取this.props显示为undifined:如下:

    class Header extends React.Component {
        constructor(props) {
            super();
            this.state = {
                nameOne: this.props.name, 
                nameTwo: this.props  
            };
            console.log(this.props.name);  //报错
            console.log(this.props);  //undifined
        };
        render() {
            return (
                <div>{this.state.nameOne}{this.state.nameTwo}</div>
            );
        };
    };
    
    

    这种写法本质是给子组件Header的实例属性state.nameOne和state.nameTwo赋值了一个子组件Header的实例属性props,简单来说,就是Header子组件创建了一个state属性,然后又把自己的props属性赋值给了自己的state属性。
    为什么this.props打印出undefined?因为props是调用子组件的时候传入的参数,所以在构造函数内部是访问不到props的,那么对于this.props.name来说,毫无疑问肯定报错。

    所以,对与构造函数中的props参数和super中的props参数来说,如果你不在构造函数中用this.props和props,完全可以不用传参。反之就要传参。但是对于this.props和props来说获取到的值都是一样的,所以写哪个都可以。但是官方文档上是两个参数都有写。所以为了严谨,还是都写上吧。

    但是,我个人还是喜欢这样的写法。

    constructor(props) {
        super(props);
        this.state = {
            name: props.name
        }
    };
    

    不加this的是value,加了this的是key。

    展开全文
  • react--无状态组件和有状态组件
    • 学习资源推荐 https://blog.csdn.net/qq_42813491/article/details/90213353

    概念

    react中组件根据自身状态可分为无状态组件或叫函数组件,另一种叫做有状态组件或者叫类组件。无状态组件接受一个props参数,主要用来渲染模板,内部没有复杂d的业务逻辑,与之相反,有状态组件是用class关键字创建,内部主要的东西就是繁杂的业务逻辑。

    示例

    无状态组件

    import React, { Fragment } from 'react';
    import TodoItem from "./TodoItem"
    
    const TodoListUI = (props) => {
        return (
            <Fragment>
                <div>
                    <input
                        onKeyUp={props.enterAdd}
                        type="text"
                        value={props.inputValue}
                        onChange={props.changeInputValue}
                    />
                    <button onClick={props.addTodoItem} > 添加 </button>
                </div>
                <ul>
                    {
                        props.list.map((item, index) => {
                            return <TodoItem
                                todo_item={item}
                                key={item}
                                index={index}
                                delTodoItem={props.delTodoItem.bind(this)}
                            />
                        })
                    }
                </ul>
            </Fragment>
        );
    }
    
    
    export default TodoListUI;
    

    有状态组件

    • 部分截图
      在这里插入图片描述
    展开全文
  • 状态组件: 有状态组件的区别是它属于一个class类, 有继承, 可以通过this来接收状态和属性 如果你想用react的生命周期, 想对一些数据进行增删改查的话就要用到有状态组件 import React, { Component } ...

    有状态组件:

    有状态组件的区别是它属于一个class类,

    有继承,

    可以通过this来接收状态和属性

    如果你想用react的生命周期,

    想对一些数据进行增删改查的话就要用到有状态组件

    import React, { Component } from 'react'
    
     class Footer extends Component {
      render() {
        return (
          <div>
            
          </div>
        )
      }
    }
    export default Footer;

    无状态组件:

    无状态组件是属于一个函数

    没有继承功能;

    也没有生命周期,

    他的动态数据都是通过父组件传值子组件通过props接收渲染,

    针对一些简单的逻辑判断等等,选 用无状态组件

    import React from 'react'
    
    export default function Footer() {
      return (
        <div>
          
        </div>
      )
    }
    

    注:大部分建议使用无状态组件,因为如果大量用有状态的组件容易触发生命周期和钩子函数,页面会出面加载慢等问题,

    什么时候用有状态组件?

    在不确定或者确定要用到数据增删改查模块就可以 

    在需要管理状态,或者需要使用生命周期时再用

     

    展开全文
  • 有状态和无状态组件,State和SetState 1.有状态和无状态组件 1.函数组件又叫做无状态组件,类组件又叫有状态组件; 2.状态(state)就是数据; 3.函数组件没有自己的状态,只负责数据展示; 4.类组件有自己的状态,负责更新UI...
  • react无状态组件和纯组件 一:无状态组件        无状态组件可以通过减少继承Component而来的生命周期函数而达到性能优化的效果。 从本质上来说,无状态组件就是一个单纯的...
  • 无状态组件与纯组件(pureComponent) 1.1 无状态组件 无状态组件可以通过减少继承Component而来的生命周期函数而达到性能优化的效果。从本质上来说,无状态组件就是一个单纯的render函数,所以无状态组件的缺点也是...
  • 无状态组件ref取表单的值 //val就是dom <input type="text" ref={(val)=>value=val}/> console.log(value.value) //需要使用Hook 16.8新增的 import React,{useState} from "react" const Index = ...
  • 众所周知,React是一个专注于View层的前端框架,组件也】是React核心理念之一,...在了解React中的无状态和有状态组件之前,先来了解在React中创建组件的三种方式: ES5写法:React.createClass; ES6写法:Reac...
  • React 0.14 引进了一种更简单的方式来定义组件,也就是无状态组件。这种组件使用了原生Javascript 函数,下图就是在用ES6的情况下,React 0.14 之前版本的组件写法和它之后对应的组件写法。 前者用了27行代码...
  • react无状态组件

    2019-07-05 16:56:36
    React中创建组件有三种方式: es5写法:React.createClass es6写法:React.Component ...状态的函数创建的组件是无状态组件,它是一种只负责展示的纯组件: function Hello(props){ return (<...
  • 无状态组件在需要生命周期时,可以通过高阶组件来实现 如下: 1.无状态组件作为高阶组件的参数,并在最后通过调用高阶函数 导出 一个高阶组件 //这是一个无状态组件 TableComponent import React from 'react...
  • 无状态组件:其实就是一个函数 有状态组件,是一个class类,继承了类的组件是有状态组件,App.js就是一个有状态的组件 区别: 1.有状态组价是可以使用state的,只有继承了Component的组件才可以拥有state进行一些数据...
  • 无状态组件 1.就是一个函数 2.不能使用state,只会接收一个props形参,并且直接使用props参数不需要this 3.没有生命周期函数 生命周期函数 1.constructor 是es6中的构造函数,在该函数中可以调用当前组建的父级采用...
  • React无状态组件更新props时会失去焦点当input,和Textarea为状态组件时,上级props变更会导致组件完全更新! 完全更新是好事,但是正在输入的Texteara会把焦点指到最后! 所有代码就不贴了,有时间贴上代码 下列无状态...
  • 状态组件 x 无状态组件、容器组件 x 展示组件、高阶组件 x 渲染回调(函数作为子组件) 自从我使用 React(Facebook,一个使用 JavaScript 构建用户界面的库)以来已经有一段时间了 – 当我刚刚开始时,我希望我...
  • React中创建组件的方式 ES5的写法:React.createClass( {} ),接受一个对象参数,切参数内必须含有render函数,通过render函数返回一个组件实例,如 import React from 'react' import ReactDOM from 'react-dom'...
  • 无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑。其实无状态函数式组件也是官方比较推荐的...
  • 一、概念 组件可以通过props和state来包含数据: props是一个组件的配置信息。它们是从组件的上层传递而来,在组件接收到之后就保持不变。 state一开始在组件...对于React组件而言,state是可选的。在大部分...
1 2 3 4 5 ... 20
收藏数 37,095
精华内容 14,838