React

参考资料:

React 官网
阮一峰教程
菜鸟教程
React 初识
===
React 是一个用于构建用户界面的 JAVASCRIPT 库。
主要用于构建UI, 是 MVC** (模型(model)-用户界面(view)-控制器(controller))**中的 V(用户界面)。

JSX

React 使用JSX语法,它允许HTML与javascript混写。
遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;
遇到代码块(以 { 开头),就用 JavaScript 规则解析。

  

{this.props.title}

ReactDOM.render()

该方法是React的基本法,它可以将模板(下面的element以及component)转为HTML语言,再插入到指定的DOM中。
Element (元素)
===
描述的是你希望在屏幕中显示的内容

  const element=

hello world

; ReactDom.render( element, document.getElementById('root') )

我们可以将该元素传递给DOM节点,通过ReactDOM.render()

React element 是不可改变的,在它创建了之后,它的属性,子元素都不能改变。如果非要改,就只能重新创建一个新的元素。

  function tick(){
    const element = (
            

It is {new Date().toLocaleTimeString()}.

); ReactDOM.render( element, document.getElementById('root') ); } {/*每一次执行setInterval都会创建一个新的元素*/} setInterval(tick, 1000);

Components and Props(组件和属性)

组件可以把UI(用户界面)分成许多独立的小块来单独考虑。
它可以接收任意形式的输入和 返回一个React element

定义一个组件有两种方式 (从React 角度来看这两种方法是相同的)

  function Welcome(props){
      return 

Hello, {props.name}

; } {/*js的函数形式*/} class Welcome extends React.Component{ render(){ return

Hello, {this.props.name}

; } } {/*ES6中的类来定义*/} const element = ; ReactDOM.render( element, document.getElementById('root') );

注意:
组件的名字只能用大写字母开头,否则会报错
组件类只能包含一个顶层标签,否则也会报错。

比如定义多个组件

  function App () {
        return (
                
); } ReactDOM.render( document.getElementById('root') );

组件必须返回一个单一的根元素,所以我们用一个

元素来包含所有的 element ,否则会报错。
在返回的根元素中(比如上面的
),我们可以尽可能将有联系的部分合成一个组件。

注意:
定义一个function内的函数不能改变它的输入,比如下面第一种可以第二种不行。

  function sum(a, b) {
       return a + b;
      }
  function withdraw(account, amount) { 
    account.total -= amount;
      }

State and Lifecycle(状态和生命周期)

在一开始时说“React element在一旦创建了之后,它的属性,子元素都不能改变。如果非要改,就只能重新创建一个新的元素。”所以每一次时间改变都要重新把element传递给DOM。但实际上,大多数React只执行一次 ReactDOM.render() ,所以引入State 。

React把组件看做是状态机,一开始有一个初始的State。通过与用户的交互导致State改变后,自动调用组件内的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 ?"like" : "unliked";
          retuen  (
              

{text}我。点我切换状态。

); } }); ReactDOM.rennder( , document.getElementById('root') );

注意:
设置State的只能使用setState({comment: 'Hello'}); 方法

实现组件的生命周期
组件的周期分为三个状态
* Mounting 已插入真实DOM
* Updating 正在被重新渲染
* Unmounting 已移出真实DOM
React为每个状态都提供了两种处理函数,will函数在进入状态前调用,did函数在进入状态之后调用。共计五种:
* componentWillMount ()
* componentDidMount ()
* componentWillUpdate(object nextProps, object nextState)
* componentDidUpdate(object prevProps, object prevState)
* componentWillUnmount()

比如,我们当一个组件在一开始提交到DOM时可以设置一个不断更新State的计时器(timer)

  componentDidMount()  {
      this.timerID = setInterval( 
      () => this.tick(), 
      1000 
      );
  }

当该组件从DOM中移除时可以清除这一个定时器

  componentWillUnmount() {
      clearInterval(this.timerID);
  }

你可能感兴趣的:(React)