27
2017
09

React和JSX

参考:React教程

一、react概念

React 是一个用于构建用户界面的 JAVASCRIPT 库。

二、JSX概念

JSX必须借助ReactJS环境才能运行,在编写JSX代码前,必须先加载ReactJS文件,JSX并不是一门新的语言,仅仅是一个语法糖,允许开发者在javaScript中书写HTML的语法,最后每个HTML标签都转化为JavaScript代码来运行。

三、React组件

(1)、React组件

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

实例1:(封装一个输出 “Hello World!” 的组件,组件名为 HelloMessage)

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

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

(2)、复合组件

我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。
实例2中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息,也就是说 WebSite 拥有 Name 和 Link 的实例。

实例2:

    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(

(3)、组件API

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

  2. replaceState(object nextState[, function callback])
    nextState,将要设置的新状态,该状态会替换当前的state。
    callback,可选参数,回调函数。该函数会在replaceState设置成功,且组件重新渲染后调用
    replaceState()方法与setState()类似,但是方法只会保留nextState中状态,原state不在nextState中的状态都会被删除。

  3. 设置属性:setProps

  4. 替换属性:replaceProps

  5. 强制更新:forceUpdate

  6. 获取DOM节点:findDOMNode

  7. 判断组件挂载状态:isMounted

四、React State(状态)

  1. React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
  2. 如实例1:getInitialState方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。每次修改后都调用render方法渲染组件。

实例1:

  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')
  );

五、React Props

(1)、使用Props

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

实例1:

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

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

(2)、默认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')
    );

六、组件生命周期

组件生命周期分为三个状态:

  • 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 中移除的时候立刻被调用。

实例1: (初始化 state , setNewnumber 用于更新 state。所有生命周期在 Content 组件中)

    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')
    );

七、表单与事件

(1)、表单

在实例1中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化,并修改 state。

实例1:

    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')
    );

(2)、事件

实例2:(通过 onClick 事件来修改数据)

    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')
    );

八、JSX特点

(1)、 元素名

JSX里分别使用首字母大、小写来分别区分本地组件和HTML标签,render渲染时会把大写的组件名定义为自定义的组件,把小写的组件名定义为HTML自带的标签名进行渲染。

(2)、自闭合标签

在 JSX 中, 是合法的,而 就不合法。 所有的标签都必须闭合,可以是自闭和的形式,也可以是常规的闭合。()

(3)、javaScript表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中

(4)、注释

注释需要写在花括号中,实例如下:

    ReactDOM.render(
        <div>
        <h1>菜鸟教程</h1>
        {/*注释...*/}
         </div>,
        document.getElementById('example')
    );
上一篇:美团面试 2017年秋季 下一篇:Android百度地图点聚合开发