react学习总结1--基础（一）

react 学习总结–基础（一）

说明

React 版本 ：”15.4.1”

react-tap-event-plugin 版本： “^2.0.1”

1.react 是什么

React 是 Facebook 内部的一个JavaScript类库，可用于创建Web用户交互界面。他引入了一种新的方式来处理浏览器DOM，只需要声明式的定义各个时间点的用户界面，无需关心数据变化时需要更新那一部分DOM。在任何时间点，React都能以最小的DOM修改来更新整个应用程序。

react 的特点

react 将原本的DOM操作接管，提出了 Virtual DOM(虚拟DOM)、单项数据流、用很少的接口覆盖在组件开发的生命周期上，采取声明式的语法等，实现了一个纯粹的组件“引擎”。

react 鼓励你为每一个关注点创造一个独立的组件，并把所有的逻辑和标签封装在其中

一个完整的例子

    import React,{Component} from 'react';    import ReactDOM from 'react-dom';    export default class Child extends Component{        constructor(props){            super(props);        }        render(){            return (                <div>this is component</div>            )        }    }    ReactDOM.render((        <Child />    ),document.getElementById('app'));

---

2.JSX

JSX 即 JavaScript XML 一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性

JSX 以干净整洁的方式保证了组件中的标签与所有业务逻辑的相互分离，他不仅提供了一个清晰、直观的方式来描述组件树，同时还让你的应用程序更加符合逻辑

JSX 与 HTML 有何不同

JSX 以与 HTML 同样的方式给每个节点设置属性，同时还提供了将属性设置为动态的JavaScript变量的便利

HTML：
<div id="div-id" class="div-class"></div>

JSX：
<div id={divId} className={divClass}></div>

属性值{}可以设置为一个函数调用的返回结果，但是不能直接加入if/else逻辑，解决的办法就是使用以下运算符

• 使用三目运算符 flag ? true : false;
• 设置一个变量并在属性中引用他
• 讲逻辑转化到函数中
• 使用 && 运算符

非DOM属性 key（键） / ref（引用）

事件，react的事件名已经被规范化并统一用驼峰形式表示，例如click变为onClick

注释，jsx本质就是JavaScript，注释有两种形式

• 当做一个元素的子节点 <div> {/* 子节点 */} <p>内容</p></div>
• 内联在元素的属性中 <div /* 属性中 */ class="div-class">内容</div>

特殊属性 for => htmlFor , class => className

样式，内联样式，只需要把驼峰形式的命名和期望的css值拼接成对象即可

3.组件的生命周期

实例化阶段

一个实例初次被调用时的生命周期方法，首次使用一个组件类时，下面这些方法依次被调用：

• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidMount

再次调用组件类创建新的实例时，除 getDefaultProps 外都会被重新调用

getDefaultProps

在组件类创建的时候调用一次，这个方法返回的对象用于为实例设置默认的props值，会合并到 this.props

该方法返回的任何复杂的值，例如对象和数组，都会在所有实例中共享，而不是拷贝或者克隆

    getDefaultProps(){        return {            title : ''         };    }

getInitialState

对组件的类的每个实例来说，只调用一次，返回值作为this.state的初始值，在这个方法里，已经可以访问到 this.props

    getInitialState(){        return {            list : []        }    }

componentWillMount

该方法会在完成首次渲染之前被调用，且只调用一次，此方法中可以感知到state，是render之前修改 state的最后一次机会，修改state之后不会再次调用

    constructor(props) {        super(props);        this.state = {          num : 0        };    }    componentWillMount() {      console.log(this.state.num); //0，只会打印一次      this.setState({num:2});    }

render

render 是组建唯一一个必须的方法，在这里会创建一个虚拟的DOM，来表示组件的输出

render 中需要遵守特定的规则

• 只能通过 this.props 和 this.state 访问数据
• 可以返回任何 React 组件 或者 null，false 来表明不需要渲染任何东西，React 渲染一个
  <noscript></noscript> 标签来处理当前的差异检查逻辑
• 只能出现一个顶级组件（不能返回一组元素）
• 必须纯净，此方法内不要修改组件的 state ，不读写DOM信息，也不要和浏览器交互

render 方法返回的结果不是真正的DOM，而是一个虚拟的表现，React随后会把它和真实的DOM做对比，来判断是都有必要做修改

    render() {        return (        <div className="container">            <div style={{display : this.state.close ? 'none' : 'block'}} className="header">                {this.props.headerText}            </div>            <div className="content">                {this.props.content}            </div>        </div>    }

componentDidMount

render 方法成功调用 初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用），在此阶段中，可以访问真实的DOM元素，如果想与其他框架集成，可以在此方法中进行

    componentDidMount(){        console.log(ReactDOM.findDOMNode(this.refs.a)); //输出真实的DOM节点    }

存在期

此时组件已经渲染好，并且用户可以与它进行交互，
随着应用状态的改变，下列方法依次被调用

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

componentWillReceiveProps

在任意时刻，组件的props都可以通过父辈组件来更改，在组建接收到新的props的时候就会调用此方法，在初始化渲染的时候此方法不会被调用，在函数中调用this.setState()将不会引起第二次渲染

    componentWillReceiveProps(nextProps) {        if (nextProps.checked !== undefined) {          this.setState({            checked : nextProps.checked          })        }    }

shouldComponentUpdate

在接收到新的props或者state，将要渲染之前调用，通过返回的true/false决定组件是否更新
如果返回 false ，那么render 将不会被执行，componentWillUpdate 和 componentDidUpdate 也不会被执行

  shouldComponentUpdate(nextProps, nextState) {    if (nextProps.num === this.props.num && nextState.num === this.state.num) {      return false;    }  }

componentWillUpdate

组件在接收到新的props或者state之前立刻调用，做一些更新前的准备，不能在此方法中调用this.setState()，需要更新state或者props可以再 componentWillReceiveProps中更新

  componentWillUpdate(nextProps, nextState) {    console.log(nextProps);    console.log(nextState);  }

componentDidUpdate

与 componentDidMount 类似的方法，给了我们更新已经渲染好的DOM的机会，可以操作真实DOM

  componentDidUpdate(prevProps, prevState) {    console.log(prevProps);    console.log(prevState);  }

销毁期

组件被使用完成后

• componentWillUnmount

componentWillUnmount

组件被移除前调用，执行必要的清理任务，例如无效的定时器，在componentDidMount中创建的DOM元素等

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

4.下一篇内容传送门

• react 数据流
• 事件处理
• 复合组件
• DOM操作
• 表单