react系列---react(二)组件的prop和state - 编程思维

React系列---React(一)初识React
React系列---React(二)组件的prop和state
React系列---React(三)组件的生命周期


组件是React的基石,所有的React应用程序都是基于组件的。基于组件的应用开发是广泛使用的软件开发模式,用分而治之的方法,把一个大的应用分解成若干小的组件,每个组件只关注某个特定功能,但是把组件组合起来,就能构成一个功能庞大的应用。

React组件的数据分为两种,prop和state,无论prop或者state的改变,都可能引发组件的重新渲染。prop是组件对外接口,state是组件内部状态。

第一个组件

create-react-app工具,初始化一个React项目:

npm create-react-app react-component-demo

创建一个可以计算点击数的组件:
/src/ClickCounter.js:

import React from 'react';

class ClickCounter extends React.Component {
    constructor(props) {
        super(props);
        this.onClickButton = this.onClickButton.bind(this);
        this.state = {count: 0};
    }

    onClickButton() {
        this.setState({count: this.state.count + 1});
    }

    render() {
        return (
          <div>
            <button onClick={this.onClickButton}>Click Me</button>
            <div>
              Click Count: {this.state.count}
            </div>
          </div>
        );
    };
}

export default ClickCounter;

修改/src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import ClickCounter from './ClickCounter';

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

运行React项目

npm run start

点击按钮,数字会随之增加。恭喜你,已经构建了一个有交互的组件!

我们还可以在React组件中定义样式。修改ClickCounter组件的render函数:

render() {
    const counterStyle = {
        margin: '16px'
    };
    return (
      <div style={counterStyle}>
        <button onClick={this.onClickButton}>Click Me</button>
        <div>
          Click Count: <span id="clickCount">{this.state.count}</span>
        </div>
      </div>
    );
};

组件的prop

React组件通过定义自己能够接受的prop就定义了自己对外公共接口。外部世界通过prop和组件对话。

给prop赋值

从外部世界看prop的使用:

<SampleButton id="sample" borderWidth={2} onClick={onButtonClick} style={{color: "red"}} />

上面的例子使用了名为SampleButton的组件实例。React组件的prop所能支持的类型除了字符串,还可以是任何一种JavaScript语言支持的数据类型。当prop的类型不是字符串时,再JSX中必须用花括号{}把值包裹,所以style的值有两层花括号,外层代表是JSX的语法,内层代表这是个对象常量。

React组件要反馈数据给外部世界,也是用prop,因为prop类型也可以是函数,函数类型的prop等于让父组件交给子组件一个回调函数,子组件在恰当的时机调用函数的prop,就可以把信息传递给外部世界。

为了演示,我们构造一个应用包含两种组件,ControlPanel父组件,然后若干个Counter子组件。对于Counter组件,父组件ControlPanel就是外部世界:

class ControlPanel extends React.Component {
    render() {
        return (
          <div>
            <Counter caption="First" initValue={0} />
            <Counter caption="Second" initValue={10} />
            <Counter caption="Third" initValue={20} />
          </div>
        );
    }
}

React要求render只能返回一个元素,所以我们用div包裹了3个子组件。

每个Counter组件使用了caption和initValue两个prop。ControlPanel通过caption的prop传递给Counter组件实例说明文字,通过initValue的prop传递给Count组件一个初始的计数值。

读取prop值

看下Counter组件内部是如何接收prop的:

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.onClickIncrementButton = this.onClickIncrementButton.bind(this);
        this.onClickDecrementButton = this.onClickDecrementButton.bind(this);

        this.state = {
            count: props.initValue || 0
        };
    }
}

如果组件需要定义自己的构造函数,构造函数第一行一定要通过super调用父类React.Component的构造函数。给this.props赋值也是React.Component构造函数的工作之一。
在Counter的构造函数中,还给两个成员函数绑定了当前this的执行环境,因为ES6方式创建的组件并不自动给我们绑定this到当前实例对象。

在其他函数中则可以通过this.props访问传入的值,看一下render函数:

render() {
    const {caption} = this.props; // ES6的解构赋值
    return (
      <div>
        <button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
        <button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button>
        <span>{caption} count: {this.state.count}</span>
      </div>
    );
};

propTypes检查

在ES6方法定义的组件中,可以通过增加类的propTypes属性来定义prop规格。在运行和静态代码检查时,都可以根据propTypes判断外部世界是否正确地使用了组件的属性。

增加Counter组件的propTypes定义:

Counter.propTypes = {
  caption: PropTypes.string.isRequired,
  initValue: PropTypes.number
};

开发过程中,定义propTypes代码可以避免犯错,但是在发布产品时,可以用babel-react-optimize工具自动去除propTypes,这样部署到产品环境的代码就会更优。

组件的state

驱动组件渲染的除了prop,还有state,state代表组件内部状态。由于React组件禁止修改传入的prop,所以当组件需要记录自身的数据变化时,就要使用state。
在Counter组件中,初始计数可以通过initValue这个prop指定。当用户点击“+”和“-”改变计数时,就要Counter组件自己通过state来存储了。

初始化state

通常在构造函数的结尾处初始化state,就如上面的Counter:

constructor(props) {
    ...
    this.state = {
        count: props.initValue || 0
    };
}

由于在PropType声明中没有用isRequired,我们需要在代码中判断给定的prop值是否存在,不存在则给一个默认值。我们可以利用React的defaultProps功能,避免判断逻辑这种充斥在构造函数之中,让代码更优。

给Counter组件添加defaultProps代码:

Counter.defaultProps = {
    initValue: 0
};

构造函数就可以简化了:

constructor(props) {
    ...
    this.state = {
        count: props.initValue
    };
}

读取和更新state

通过给button的onClick属性挂载点击事件处理函数,我们可以改变组件的state,以点击“+”按钮的响应函数为例:

onClickIncrementButton() {
    this.setState({count: this.state.count + 1});
}

通过this.state可以读取到组件的当前state。注意的是,改变state必须使用this.setState函数,而不能直接修改this.state。如果你违反这个操作,浏览器Console会告警。

直接修改this.state的值,只是野蛮的修改了state,却没有驱动组件重新渲染,新的值当然也不会反应在界面上。而this.setState()函数所做的事情,就是改变this.state的值后再驱动组件重新渲染。

无状态函数式组件

没有内部state,不需要组件生命周期函数。可以用纯函数的形式来表达。它做的事情只是根据输入来展示组件,没有其他副作用。可以把这种组件称为无状态函数式组件(stateless functional component)。

import React from 'react';

// 用一个纯函数表示
const Hobby = (props) => <li>{props.hobby}</li>;

export default Hobby;

state设计原则

创建尽量多的无状态组件,这些组件唯一关心的就是渲染数据。而在最外层,应该有一个包含state的父级别组件,用于处理各种事件、交流逻辑、修改state。对应的子组件要关心的只是传入的属性而已。

state应该包含组件的事件回调函数可能引发UI更新的这类数据。在实际的项目中,应该是轻量化的JSON数据,尽量把数据的表现设计到最小,更多的数据可以在render中通过各种计算得到。

prop和state对比

  • prop用于定义外部接口,state用于记录内部状态;
  • prop的赋值在外部世界使用组件时,state的赋值在组件内部;
  • 组件不应该改变prop的值,而state的存在的目的就是让组件来改变的。

DOM操作

大多数情况下,不需要操作DOM去更新UI,应使用setState。但是有些情况确实需要访问一些DOM(如表单的值),那么可采用refs方式来获得DOM节点。只需要加个ref属性,然后通过this.refs.name来获得对应的DOM结构。

示例Profile组件:

render() {
  return (
    <div>
      ...
      <input type="text" ref="hobby" />
      <button onClick={this.addHobbyCallback}>添加爱好</button>
    </div>
  )
}

在button上添加事件,取得input的值,添加到state的值里面:

addHobbyCallback() {
  // 用this.refs.name来取得DOM节点
  let hobbyInput = this.refs.hobby;
  let val = hobbyInput.value;
  if (val) {
    let hobbies = this.state.hobbies;
    // 添加值到数组
    hobbies = [...hobbies, val];
    // 更新state, 刷新UI
    this.setState({
      hobbies
    }, () => {
      hobbyInput.value = '';
    });
  }
}

React系列---React(一)初识React
React系列---React(二)组件的prop和state
React系列---React(三)组件的生命周期

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://segmentfault.com/a/1190000009921542

掘金 - 编程思维

教你如何搭建一个超完美的 React.js 服务端渲染开发环境 - 前端 - 掘金Github地址: https://github.com/chikara-ch... 目录 ... 【译】2016 年 50 个最佳的轻量级 JavaScript 框架和库 - 前端 - 掘金回顾今年已发布的 JS 框架和库,我们针对地筛

react系列---react(一)初识react - 编程思维

React系列---React(一)初识ReactReact系列---React(二)组件的prop和stateReact系列---React(三)组件的生命周期 React是Facebook推出的一个JavaScript库,它的口号就是“用来创建用户界面的JavaScript库”,所以它只是和用户界面打交道,可以把

从redux-thunk到redux-saga实践 - 编程思维

文章同步于Github Pines-Cheng/blog 简介 本质都是为了解决异步action的问题 Redux Saga可以理解为一个和系统交互的常驻进程,其中,Saga可简单定义如下: Saga = Worker + Watcher saga特点: saga的应用场景是复杂异步,如长时事务LLT(long l

react系列---eslint - 编程思维

ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量。维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。 详细的可以参考:ESLint中文 让项目加上ESLint

dingdang ( 一个管理react数据层的产品 ) - 编程思维

dingDang ( 一个管理react数据层的产品 ) github地址 我们将dingDang定义为一个产品而不是一个框架亦或工具包 。 因为dingDang在设计之初就将用户的开发体验放在第一位,而性能问题则放在第二位。 当然这并不意味着我们就是一个性能很糟糕的产品,只是说我们会在性能能够接受的范围内尽可能的

react系列---babel - 编程思维

Babel是一个广泛使用的转码器,可以将ES6/ES7代码转为ES5代码。JavaScript在不断发展,各种新的标准提案层出不穷,由于浏览器的多样性导致可能几年之内都无法广泛普及,Babel可以让你无顾虑的使用这些特性。 Babel提供一个REPL在线编译器,可以在线将ES6代码转为ES5代码。你可以感受下。 基于插