金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 入门基础

入门基础

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-29 12:43

组件、Prop 和 State

2018/08/09 · JavaScript · React

原文出处: Linton Ye   译文出处:郑丰彧   

系列博客: 用通俗的语言和涂鸦来解释 React 术语

  • 图解 React
  • 图解 React Native
  • 组件、Prop 和 State (本文)
  • 深入理解 Props 和 State (待翻译)
  • React Native vs. Cordova、PhoneGap、Ionic,等等 (待翻译)

今天我们来学习 React 里最重要的三个概念: 组件、prop 和 state ,以及 prop 和 state 之间的区别。

如同之前的文章,我还是会尝试用通俗的语言来解释这些概念。因此,阅读本文同样不需要任何 JavaScript 基础。

在本章中你根本找不到任何 JavaScript 代码,我将用一种简单的标识语言来帮助你理解主要的概念,在以后的文章里我再用 JavaScript 代码详细讲解。一步一个脚印嘛,我相信这种方法对于学习 React 或其他技术都是有效的,尤其是当你没有太多编程经验时。要是将 React 的概念和 JavaScript 的细节混在一起的话,很可能会令你不知所措!

使用 create-react-app 快速构建 React 开发环境

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

项目的目录结构如下:

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下:

React介绍

React是facebook开发基于组件驱动开发(CDD ) 的UI类库,相对于双向绑定的类库,如AngularJS,它采用单向数据流绑定。通过采用虚拟DOM的概念,是的他在性能和处理速度上,比其他类库要快。并不能把它直接理解为前端MVC,顶多他就是V的部分,当然他不局限于你采用的何种框架,因此,在已有的AngularJS框架,你也可以混合reactJS,替换他的directive,从来解决ng-repeat那繁重的工作。

学习目标

当你读完本文后希望你能重新回到这里,并能够轻松回答以下问题:

  • 什么是 prop ?
  • 什么是 state ?
  • 何时使用 prop ?何时使用 state ?
  • 如何让例子的窗户可以打开和关闭?
  • 你能写出 Domo 帽子那个例子的伪代码吗?

React JSX

你的 React JSX 代码可以放在一个独立文件上,例如我们创建一个 helloworld_react.js 文件,代码如下:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然后在 HTML 文件中引入该 JS 文件:

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术,更是梦想!</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);
  1. 可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中

  2. 在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代

  3. 注释需要写在花括号中

  4. 要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名;要渲染 React 组件,只需创建一个大写字母开头的本地变量

  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

虚拟DOM与React差异算法

之前说过,React之所以快,是因为他并没有直接与DOM对话。React维护一个存放于内存中的虚拟DOM,通过Render()方法渲染DOM对象,React在内存对比两者DOM的差异从而更新浏览器的展示效果

说说React差异算法

无论何时你调用setState方法时,React都会给当前组件做标记。最后React将会识别这些标记化的组件,重新渲染他们。如图1所示:

金沙棋牌官方平台 1(图1 )

盖房子

要想理解这些概念是什么以及如何使用它们,我们先来写一个小示例。就盖个房子如何?(点击门有惊喜)

查看由 focuser (@focuser) 在 CodePen 编写的 Demo : React 小屋。

React 组件

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World!</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

React.createClass 方法用于生成一个组件类 HelloMessage。<HelloMessage /> 实例组件类并输出信息。

注意,原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头,比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签,否则也会报错。

如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下:

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById('example')
);

以上实例中 name 属性通过 this.props.name 来获取。

注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。

    ReactDOM.render(
      <HelloMessage name="柠檬先生" />,
      document.getElementById('example')
    );
   </script>
  </body>
  注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。

开始ReactJS之旅

首先我们需要先下载相关类库,地址:React Starter Kit

创建我们的页面,首先需要引用2个文件,一个react.js和JSXTransformers.js。

<html> 
    <head>
         <script src="react.js"></script> 
        <script src="JSXTransformer.js"></script> </head> 
    <body>
         <div id="myDiv"></div>
         <script type="text/jsx">
             /** @jsx React.DOM */
                React.render(
                <h1>Hello, World!</h1>,
                document.getElementById(‘myDiv’)
                );
        </script> 
    </body>
 </html>

当然,我们也可以使用Browerify和webpack等打包我们的脚本文件。

组件

如果你还记得我们在前面文章中所讨论过的,组件的概念是 React 的三大支柱之一。使用 React 开发应用基本都是在使用组件。

第一步是将 UI 分解成多个组件。例如,我们可以这样来拆分房子:

金沙棋牌官方平台 2

现在来编码!

House: <div> <Roof /> // 房顶 <Wall /> // 墙 <Window /> // 窗 <Door /> // 门 </div>

1
2
3
4
5
6
7
8
House:
 
  <div>
    <Roof />     // 房顶
    <Wall />     // 墙
    <Window />   // 窗
    <Door />     // 门
  </div>

等一下,怎么看起来这么像 HTML ?没错!React 的部分代码看上去就是非常像 HTML ,其实就是这样设计的,这是为了让 Web 设计师理解和编写 React 代码更容易一些。太贴心了!

因此,在上面的代码中,我们使用 ``

作为容器,这基本和 HTML 中是一样的。而像 RoofWall 这样的标签是我们即将定义的自定义标签/组件。温馨提示: 上面的代码并非实际的 React 代码,甚至连 JavaScript 都算不上。暂时,我们只使用这种宽松的语法来介绍概念。一旦你理解这些概念后,我们再来学习 JavaScript 的细节并将上述概念转换成真实代码。

为了让这个例子更容易理解一些,我再简化一下: 从现在开始,我们来写一个超级简单的 Web 应用,连图片都不用,只显示文字。

例如,Roof 其实就是一个里面有文字的 div :

金沙棋牌官方平台,Roof: <div>roof</div>

1
2
3
Roof:
 
  <div>roof</div>

其他组件也是如此,都是只有文字的 div 而已。首先,我们来看下房子的完整的 React 风格的代码:

House: <div> <Roof /> <Wall /> <Window /> <Door /> </div> Roof: <div>roof</div> Wall: <div>wall</div> Window: <div>window</div> Door: <div>door</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
House:
 
  <div>
    <Roof />
    <Wall />
    <Window />
    <Door />
  </div>  
 
Roof:
 
  <div>roof</div>
 
Wall:
 
  <div>wall</div>
 
Window:
 
  <div>window</div>
 
Door:
 
  <div>door</div>

这没什么不好理解的,是吧?House 是由 RoofWallWindowDoor 组成的,这些都是纯文本构成的组件。

最后,React 生成的 HTML 如下所示:

<div> <div>roof</div> <div>wall</div> <div>windows</div> <div>door</div> </div>

1
2
3
4
5
6
<div>
  <div>roof</div>
  <div>wall</div>
  <div>windows</div>
  <div>door</div>
</div>

复合组件

我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

ReactDOM.render(
  <WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
  document.getElementById('example')
);

实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息,也就是说 WebSite 拥有 Name 和 Link 的实例。

如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下:
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var WebSite = React.createClass({
          render: function() {
            return (
              <div>
                <Name name={this.props.name} />
                <Link site={this.props.site} />
              </div>
            );
        }
      });

关于JSX

JSX:Javascript XML的语法转换,允许你在javascript文件中使用HTML标签.

但有些标签除外,如class、for,在JSX中对应className和htmlFor。这是因为React需要保留javascript的一些关键词

如果不使用JSX,如上的代码如下:

React.render(
        React.DOM.h1(null, ’Hello, world!’),
        document.getElementById(‘myDiv’)
    );

使用 Props 来配置屋顶的颜色

想象一下,我们将规格说明书发给一个工厂,这个工厂负责代工所有的零部件。在规格说明书中,我们可以告诉工厂每个部件的固有属性,比如屋顶的颜色、门的形状,等等。在按照我们的要求将屋顶和门生产出来后,它们的属性不会产生任何变化,屋顶还是蓝色的,门依旧是矩形的。这些属性压根不会改变。

在 React 里,我们将这些属性称之为 Prop ,即 property 的缩写。关于 Prop ,你需要记住两点: 首先,我们来决定 Prop 的值,并在组件构建之前将其作为组件设计的一部分。其次,Prop 的值永远不会改变。

那 prop 在代码中是怎样的呢?在 House 组件中,如果我们想要蓝色屋顶的话,只需在 Roof 组件上添加 “color” 属性。这就好比是在发给工厂的规格说明书中指定颜色。

这有点类似于给 HTML 标签添加属性:

House: <div> <Roof color="blue"/> ... </div>

1
2
3
4
5
6
House:
 
  <div>
    <Roof color="blue"/>
    ...
  </div>

Roof里面又是怎么样使用 prop 的呢?代码如下所示:

Roof: <div>{props.color} roof</div>

1
2
3
Roof:
 
  <div>{props.color} roof</div>

就这样?没错!但是有几点需要注意:

  • 定义组件的 HTML 风格代码是一个模板,而不是单纯的 HTML 标签。这意味着我们可以在其中放置占位符来改变 HTML 输出的内容,而不必重复编写不同的 HTML (还记得 Domo 的帽子吗?这就是占位符的概念!)。在这个示例中,<Roof color="blue" /> 生成的 HTML 是 <div>blue roof<div>,而 <Roof color="red" /> 生成的是 <div>red roof</div>,以此类推。
  • 模板中使用的花括号告诉 React 我们要在此处使用占位符来替代纯文本。
  • props 可以看作是 Roof 组件所有属性值的集合。假设组件是这样使用的: <Roof color="blue" material="wood" /> ,那么在 Roof 组件的定义中就可以使用 props.color和 props.material 。

React State(状态)

(React 把组件看成是一个状态机(State Machines),通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM))

getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件.

 var LikeButton = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? '喜欢' : '不喜欢';
    return (
      <p onClick={this.handleClick}>
        你<b>{text}</b>我。点我切换状态。
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

      var Name = React.createClass({
            render: function() {
              return (
                <h1>{this.props.name}</h1>
               );
            }
      });

自定义组件

我们可以使用createClass来创建自定义的组件。

Var MyComponent = React.createClass({
    render: function(){
        return (
            <h1>hello, world!</h1>
        );
    }
});
React.render()
    <MyComponent/>,
    document.getElementById(‘myDiv’)
;

使用 State 来开门

React Props

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

     var Link = React.createClass({
          render: function() {
            return (
              <a href={this.props.site}>
                {this.props.site}
              </a>
            );
        }
    });

 关于Props

当我们使用自定义好的组件时,需要调用我们组件的属性,可以通过this.props的方式传递参数。

var MyComponent = React.createClass({ 
        render: function(){ 
            return ( 
                <h1>Hello, {this.props.name}!</h1> 
            ); 
        } 
    }); 
    React.render(
        <MyComponent name="Handsome" />, 
        document.getElementById('myDiv')
    );

如上,自定义组件MyComponent的属性name,在render渲染中,通过this.props进行单向传递。关于多组件的传递,后续讲解。

为组件添加 State

组件还可以拥有 state 。那么什么是 state ?state 是一种可以在组件创建后更改的数据。

举个例子,门既可以开,又可以关。我们可以说门的状态就是 state ,因为它的值是可以在门创建后更改的。在这点上,state 与 prop 是不同的,prop 是不会改变的,比如门的形状。

状态值的改变通常是由外部事件所引起的。在 Web 应用中,这些所谓的外部事件通常包括:用户输入了数据,或者从服务端获取了数据,又或者是定时器的触发。

下面,我们来为门添加 state :

Door: State: status // "open" 或 "closed" <div>Door is {state.status}</div>

1
2
3
4
Door:
  State:
    status   // "open" 或 "closed"
  <div>Door is {state.status}</div>

props 类似,state 也是组件内部所有状态值的集合。因此,我们可以在组件定义的模板中使用 state.[something]

接下来,我们来添加一些处理用户输入的“伪代码”来让门具有交互性。

Door: State: status // "open" 或 "closed" <div>Door is {state.status}</div> // 处理用户输入 当开门时 将 state.status 修改成 "open" 当关门时 将 state.status 修改成 "closed"

1
2
3
4
5
6
7
8
9
10
Door:
State:
  status // "open" 或 "closed"
 
  <div>Door is {state.status}</div>
  // 处理用户输入
  当开门时
    将 state.status 修改成 "open"
  当关门时
    将 state.status 修改成 "closed"

这里的关键点是组件的 state 是随时间而变化的。模板的输出,也就是生成的 HTML 会根据 state 的变化而自动改变。

顺便说句,不要忘了上面的只是“伪代码”,而不是 React 代码。不要尝试将其复制黏贴到你的项目中!否则你的电脑炸了我不负责……

使用 Props

以下实例演示了如何在组件中使用 props:

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById('example')

实例中 name 属性通过 this.props.name 来获取。

    React.render(
      <WebSite name="柠檬先生" site=" " />,
      document.getElementById('example')
    );
   </script>
  </body>

生命周期、一些初始化的相关函数

在创建一个组件时,我们只需要render方法进行渲染,但是React也提供了一些事件和方法,如生命周期执行事件。这有助于我们在创建组件的时候能够更好的操作组件。

1.  生命周期

这里简要介绍比较主要的4个生命周期执行方法,依次按执行顺序列出

componentWillMount : 在渲染render发生前执行,只执行一次。

componentDidMount : 在渲染render发生后执行,只执行一次。

shouldComponentUpdate: 访问值决定组件是否更新。

componentWillUnmount:在卸载组件前执行。

2.   其他事件

getInitialState: 返回初始化的State的值

getDefaultProps:设置Props的默认值

mixins:array对象集,用于扩展当前组件的功能。

如需要更详细的介绍和使用,可查看官方的指导书,点击这里。

State 是私有的

组件的 state 是私有的。门无论是开还是关,这都仅仅是门的逻辑。与房子或其他组件没有任何关系。事实上,我们完全可以将门从房子中移出去,它仍然可以自己打开或关闭。

因此,门的状态只有在 Door 组件内部是可见的。在 Door 组件内,我们可以读取或改写它的 state 。

House: <div> <Door /> ... <!-- 下面这句是错的 --> <div>The door is {Door.state.status}</div> </div> Window: ... <!-- 下面这句是错的! --> 将 Door.state.status 修改成 'open' Door: ... <!-- 兄dei,这还是错的! --> if House.state.正在出售 房产经纪人就可以开门

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
House:
  <div>
    <Door />
    ...
    <!-- 下面这句是错的 -->
    <div>The door is {Door.state.status}</div>
  </div>
 
Window:
  ...
  <!-- 下面这句是错的! -->
  将 Door.state.status 修改成 'open'
 
Door:
  ...
  <!-- 兄dei,这还是错的! -->
  if House.state.正在出售
    房产经纪人就可以开门

默认 Props

你可以通过 getDefaultProps() 方法为 props 设置默认值,实例如下:

var HelloMessage = React.createClass({
  getDefaultProps: function() {
    return {
      name: 'Runoob'
    };
  },
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

React State(状态)

关于State

所有react组件都有自己的state对象和props对象。State的设置是通过setState方法执行,调用setState时会触发UI的更新。如果我们想初始化state可以使用getInitialState方法。

如下,是简易的state的使用方法。

var MyComponent = React.createClass({ 
    getInitialState: function(){ 
        return { count: 5 } 
    }, 
    render: function(){ 
        return ( 
            <h1>{this.state.count}</h1> 
        ) 
    }
 });

总结

好啦,这就是 prop 和 state 。prop 是组件的配置项,它的值是在组件创建之前就已经决定好了,比如门的形状和屋顶的颜色就可以定义为 prop。prop 的值永远不会改变。而 state 是组件的私有数据,当组件创建后才可以使用它。比如门的开关状态可以包括在 state 里面。state 会随着一些外部事件的发生而变化。这些所谓的外部事件通常包括:用户输入了数据,或者从服务端获取了数据,又或者是定时器的触发。

但…是,我们还没有开发任何实际的东西啊?一个只显示纯文本的应用能有多大用处呢?至少要学到如何建造本文开头所说的房子吧?界面里有东西可以点才有用啊?

毫无疑问,要做到这些呢,我们就需要用 JavaScript 编程了。这个以后再讲吧。如果你不喜欢等待,可以注册我的课程并通过教学视频进行学习。

1 赞 1 收藏 评论

金沙棋牌官方平台 3

State 和 Props

我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "菜鸟教程",
      site: "http://www.runoob.com"
    };
  },

  render: function() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

  React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
  React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
  以下实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。
  当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

事件Events的使用

React支持跨浏览器的事件,这些事件作为组件的属性来使用。

/** @jsx React. DOM */ 
    var Counter = React.createClass({ 
        incrementCount: function(){ 
            this.setState({ count: this.state.count + 1 }); 
        }, 
        getInitialState: function(){ 
            return { count: 0 } 
        }, 
        render: function(){ 
            return ( 
                       <div class="my-component"> 
                <h1>Count: {this.state.count}</h1> 
                <button type="button" onClick={this.incrementCount}>Increment</button> 
                        </div> ); 
        } 
    }); 
    React.render(<Counter/>, document.getElementById('myDiv'));

Props 验证

Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。
以下实例创建一个 Mytitle 组件,属性 title 是必须的且是字符串,非字符串类型会自动转换为字符串 :

var title = "菜鸟教程";
// var title = 123;
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

更多验证器说明如下:

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,

    //  React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

    <body>
      <div id="example"></div>
      <script type="text/babel">
          var LikeButton = React.createClass({
            getInitialState: function() {
              return {liked: false};
          },
          handleClick: function(event) {
            this.setState({liked: !this.state.liked});
          },
          render: function() {
            var text = this.state.liked ? '喜欢' : '不喜欢';
            return (
                <p onClick={this.handleClick}>
                  你<b>{text}</b>我。点我切换状态。
                </p>
              );
          }
        });

单向数据流

在react中,与双向数据绑定类库如:angularJS的根本区别在于,它通过state和props对象采用单向数据流的方式进行交互。这意味着在多组件混合的层级下,父级组件需要保留和管理State对象,并将props对象传递给所有子组件对象中。

当需要刷新UI界面时,,你的state需要通过setState方法在更新。这些state的值将再次以子组件的属性props的对象传递下去。

var List = React.createClass({ 
        render: function(){ 
            return ( 
                <ul>
                 {
                      this.props.items.map(function(item){
                    return <li key={item}>{item}</li>
                      }
                 }
                </ul>
             ); 
        } 
    });

var FilteredList= React.createClass({

  filterList: function(event){

       var updateList = this.state.initialItems;

       updatedList = updatedList.filter(function(item){

             return item.toLowerCase().search(

                event.target.value.toLowerCase())!==-1;

        });

        this.setState({items: updatedList});

  },

  getInitialState: function(){

      return {

           initialItems: [

             “Apples”,

          “Duck”,

          “Fish”

           ],

            items: []

      }

  },

componentWillMount: function(){

     this.setState({items: this.state.initialItems})

  },

  render: function(){

      return(

            <div className=“filter-list”>

            <input type=“text” placeholder=“search” onChange={this.filterList}/>

           <List items={this.state.items}/>

          </div>

      );

  }

     });

     React.render(<FilteredList.>, document.getElementById(‘myDiv’));

 

如上,在混合组件中,List的属性items是父组件的this.state.items的值,以属性this.props在List组件中使用。

 

React 组件 API

设置状态:setState
替换状态:replaceState
设置属性:setProps
替换属性:replaceProps
强制更新:forceUpdate
获取DOM节点:findDOMNode
判断组件挂载状态:isMounted

        React.render(
          <LikeButton />,
          document.getElementById('example')
        );
      </script>
    </body>

设置状态:setState

setState(object nextState[, function callback])
  • 参数说明
    • nextState,将要设置的新状态,该状态会和当前的state合并
    • callback,可选参数,回调函数。该函数会在setState设置成功,且组件重新渲染后调用。
      合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

关于setState
1. 不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。
2. setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。
3. setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我!点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

实例中通过点击 h2 标签来使得点击计数器加 1。

React Props

替换状态:replaceState

replaceState(object nextState[, function callback])
  • nextState,将要设置的新状态,该状态会替换当前的state。
  • callback,可选参数,回调函数。该函数会在replaceState设置成功,且组件重新渲染后调用。

replaceState()方法与setState()类似,但是方法只会保留nextState中状态,原state不在nextState中的状态都会被删除。

  使用 Props
      <body>
        <div id="example"></div>
        <script type="text/babel">
            var HelloMessage = React.createClass({
                render: function() {
                  return <h1>Hello {this.props.name}</h1>;
                }
            });

设置属性:setProps

setProps(object nextProps[, function callback])
  • nextProps,将要设置的新属性,该状态会和当前的props合并
  • callback,可选参数,回调函数。该函数会在setProps设置成功,且组件重新渲染后调用。

设置组件属性,并重新渲染组件。props相当于组件的数据流,它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时,我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染,可以使用setProps()。更新组件,我可以在节点上再次调用React.render(),也可以通过setProps()方法改变组件属性,触发组件重新渲染。

            ReactDOM.render(
                <HelloMessage name="柠檬先生" />,
              document.getElementById('example')
          );
      </script>
     </body>

替换属性:replaceProps

replaceProps(object nextProps[, function callback])
  • nextProps,将要设置的新属性,该属性会替换当前的props。
  • callback,可选参数,回调函数。该函数会在replaceProps设置成功,且组件重新渲染后调用。

replaceProps()方法与setProps类似,但它会删除原有props

默认 Props
    你可以通过 getDefaultProps() 方法为 props 设置默认值,实例如下:

强制更新:forceUpdate

forceUpdate([function callback])

参数说明

  • callback,可选参数,回调函数。该函数会在组件render()方法调用后调用。
  1. forceUpdate()方法会使组件调用自身的render()方法重新渲染组件,组件的子组件也会调用自己的render()。但是,组件重新渲染时,依然会读取this.props和this.state,如果状态没有改变,那么React只会更新DOM。
  2. forceUpdate()方法适用于this.props和this.state之外的组件重绘(如:修改了this.state后),通过该方法通知React需要调用render()
  3. 一般来说,应该尽量避免使用forceUpdate(),而仅从this.props和this.state中读取状态并由React触发render()调用。

    <body>
      <div id="example"></div>
      <script type="text/babel">
        var HelloMessage = React.createClass({
            getDefaultProps: function() {
              return {
                  name: '柠檬先生'
                };
            },
            render: function() {
                  return <h1>Hello {this.props.name}</h1>;
            }
        });

获取DOM节点:findDOMNode

DOMElement findDOMNode()

返回值:DOM元素DOMElement

如果组件已经挂载到DOM中,该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时,this.findDOMNode()也会返回null。从DOM 中读取值的时候,该方法很有用,如:获取表单字段的值和做一些 DOM 操作。

        ReactDOM.render(
          <HelloMessage />,
          document.getElementById('example')
        );
    </script>
  </body>

判断组件挂载状态:isMounted

bool isMounted()
返回值:true或false,表示组件是否已挂载到DOM中
isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

React 组件生命周期
组件的生命周期可分成三个状态:
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM
生命周期的方法有:
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。
以下实例在 Hello 组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒重新设置组件的透明度,并重新渲染:
React 实例
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},

componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},

render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});

ReactDOM.render(
<Hello name="world"/>,
document.body
);

以下实例初始化 state , setNewnumber 用于更新 state。所有生命周期在 Content 组件中。
React 实例
var Button = React.createClass({
getInitialState: function() {
return {
data:0
};
},
setNewNumber: function() {
this.setState({data: this.state.data + 1})
},
render: function () {
return (
<div>
<button onClick = {this.setNewNumber}>INCREMENT</button>
<Content myNumber = {this.state.data}></Content>
</div>
);
}
})
var Content = React.createClass({
componentWillMount:function() {
console.log('Component WILL MOUNT!')
},
componentDidMount:function() {
console.log('Component DID MOUNT!')
},
componentWillReceiveProps:function(newProps) {
console.log('Component WILL RECEIVE PROPS!')
},
shouldComponentUpdate:function(newProps, newState) {
return true;
},
componentWillUpdate:function(nextProps, nextState) {
console.log('Component WILL UPDATE!');
},
componentDidUpdate:function(prevProps, prevState) {
console.log('Component DID UPDATE!')
},
componentWillUnmount:function() {
console.log('Component WILL UNMOUNT!')
},

render: function () {
  return (
    <div>
      <h3>{this.props.myNumber}</h3>
    </div>
  );
}

});
ReactDOM.render(
<div>
<Button />
</div>,
document.getElementById('example')
);

React AJAX
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据库可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。
当使用异步加载数据时,在组件卸载前使用 componentWillUnmount 来取消未完成的请求。
以下实例演示了获取 Github 用户最新 gist 共享描述:
React 实例
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},

componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},

componentWillUnmount: function() {
this.serverRequest.abort();
},

render: function() {
return (
<div>
{this.state.username} 用户最新的 Gist 共享地址:
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
});

ReactDOM.render(
<UserGist source="" />,
document.getElementById('example')
);

React 表单与事件
在实例中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化,并修改 state。
React 实例
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

上面的代码将渲染出一个值为 Hello Runoob! 的 input 元素,并通过 onChange 事件响应更新用户输入的值。
实例 2
在以下实例中我们将为大家演示如何在子组件上使用表单。 onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面。
你需要在父组件通过创建事件句柄 (handleChange) ,并作为 prop (updateStateProp) 传递到你的子组件上。
React 实例
var Content = React.createClass({
render: function() {
return <div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>;
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

React 事件
以下实例演示通过 onClick 事件来修改数据:
React 实例
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: '菜鸟教程'})
},
render: function() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>点我</button>
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

当你需要从子组件中更新父组件的 state 时,你需要在父组件通过创建事件句柄 (handleChange) ,并作为 prop (updateStateProp) 传递到你的子组件上。实例如下:
React 实例
var Content = React.createClass({
render: function() {
return <div>
<button onClick = {this.props.updateStateProp}>点我</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: '菜鸟教程'})
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

React Refs
可以用来绑定到 render() 输出的任何组件上,允许你引用 render() 返回的相应的支撑实例,确保在任何时间总是拿到正确的实例
使用方法
绑定一个 ref 属性到 render 的返回值上:
<input ref="myInput" />
在其它代码中,通过 this.refs 获取支撑实例:
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
完整实例
你可以通过使用 this 来获取当前 React 组件,或使用 ref 来获取组件的引用,实例如下:
React 实例
var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
},
render: function() {
// 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick}
/>
</div>
);
}
});

ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);

 

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:入门基础

关键词: