React 基础（二）

最新推荐文章于 2023-10-09 01:56:15 发布

javafanwk

最新推荐文章于 2023-10-09 01:56:15 发布

阅读量208

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/fwk19840301/article/details/80171660

react 专栏收录该内容

23 篇文章

订阅专栏

一、ReactDOM.render()

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
	<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
	<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <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>
          );
        }
      });

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

注意：

JSX是javascript的扩展，像Typescript,coffeeScript等一样，都是Javascript的语法糖，最终都要变编译成JS执行，建议使用JSX的代码进行React的开发。因为Javascript代码与JSX代码并不兼容，凡是使用JSX的地方我们都需要加上 type="text/babel"。

JSX比较特殊的是允许Javascript和HTML的混写

  <head>
    <meta charset="UTF-8" />
    <title>菜鸟教程 React 实例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
	<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
	<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
  <div id="container"></div>

    <script type="text/babel">
    let value = "demo1";
    let buttonName = "submit";
      ReactDOM.render(
        <div>
          <input type="text" value={value}/> 
          <button>{buttonName}</button>
        </div>,
        document.getElementById("container")
      )
    </script>
  </body>
</html>

ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置。若要为创建的某个元素增加class属性，不能直接定义class而要用className，因为class是javascript中的保留字。

例如给input添加className并更改样式：

    <input type="text" className="userName" value={value}/> 
 
    .userName{background: yellow}//在CSS样式中定义

同样可以定义行内样式,将所有的样式包裹在一个对象中,以类似变量的形式给style属性赋值,注意样式属性要用驼峰命名法表示，如:backgroundColor而不是background-color;fongSize而不是font-size,

<input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/>

另外可以直接将样式赋值给一个变量，把变量赋值给style属性，如下：

    <div id="container"></div>
    <script type="text/babel">
    let value = "demo1";
    let buttonName = "submit";
    let inputStyle = {
      "backgroundColor":"yellow",
      "color":"red"
    };
      ReactDOM.render(
        <div>
          <input type="text" style={inputStyle} value={value}/> 
          <button>{buttonName}</button>
        </div>,
        document.getElementById("container")
      )
    </script>

二、组件类

允许用户自由封装组件是React非常突出的特性，用户可将自己创建的组件像普通的HTML标签一样插入页面，React.CreateClass方法就是用来创建一个组件类的。在创建和调用react组件时有几点需要注意，我们在实际的demo中进行总结。
从一个简单的例子开始，我们尝试创建一个包含文本框和提交按钮的组件：

    <div id="container"></div>
    <script type="text/babel">
      let InputWithButton = React.createClass({
        render:function(){
          return(
            <div>
              <input type="text" value="password"/> 
              <button>Submit</button>               
            </div>
          ) 
        }
      });
      ReactDOM.render(
        <InputWithButton/>,
        document.getElementById("container")
      )
    </script>

运行上述代码，显示结果如下：

在上述代码中，需要注意以下几点：

我们创建了一个名为InputWithButton的组件类，注意此处命名首字母必须大写，自动生成InputWithButton实例。
所有的组件都必须要有自己的render方法，用以输出组件。
在创建组件类时，return的最终结果内只能包含一个顶级标签，如果我们在上例中去掉div标签直接返回<input>和<button>，代码会报错。
组件的用法与原生HTML的用法一致，直接在ReactDOM.render中插入<InputWithButton/>,注意"/"不能丢，在jsx解析时会根据"/"判断标签的闭合。
另外，像原生的HTML标签一样，可以给组件添加属性，参考如下代码：

    <div id="container"></div>
    <script type="text/babel">
      let InputWithButton = React.createClass({
        render:function(){
          return(
            <div>
              <input type="text" value={this.props.value} className="input"/>
              <button>{this.props.name}</button>
            </div>
          ) 
        }
      });
      ReactDOM.render(
        <InputWithButton name="confirm" value="password"/>,
        document.getElementById("container")
      )
    </script>

如上例中调用<InputWithButton/>标签时，添加的name和value属性,在创建组件类时，可以通过this.props对象是获取组件的属性,在input通过this.props.value给value赋值，在button中通过this.props.name赋值，注意都要包裹在{}内。

添加属性时需要注意添加class属性时要用className,for属性用htmlFor,这是因为class和for是JavaScript的保留字。
在使用this.props对象获取属性时，需要注意比较特殊的this.props.children，他表示组件的所有子节点。

<div id="container"></div>
<script type="text/babel">
  let FormList = React.createClass({
    render:function(){
      return(
        <form>
          {
            React.Children.map(this.props.children,function(child){
              return <button>{child}</button>;
            })
          }
        </form>
      ) 
    }
  });

  ReactDOM.render(
    <FormList>
        <span>Submit</span>
        <span>Clear</span>
        <span>Cancel</span>  
    </FormList>,
    document.getElementById("container")
  )
</script>

如上代码，我们尝试创建一个包含三个按钮的form表单，在创建FormList组件类时，通过this.props.children获取FormList下的子元素，通过React.Children.map遍历节点。通过React专用的调试工具，我们可以查看FormList组件类的具体组成如下：

二、React 组件 API

设置状态:setState

setState(object nextState[, function callback])

参数说明

nextState，将要设置的新状态，该状态会和当前的state合并
callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。

合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

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

React 组件生命周期

在本章节中我们将讨论 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 中移除的时候立刻被调用。