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 componentdiv>
            )
        }
    }

    ReactDOM.render((
        
    ),document.getElementById('app'));

2.JSX

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

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

JSX 与 HTML 有何不同

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

HTML:

JSX:

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

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

非DOM属性 key(键) / ref(引用)

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

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

  • 当做一个元素的子节点
    {/* 子节点 */}

    内容

  • 内联在元素的属性中
    内容

特殊属性 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 渲染一个
    标签来处理当前的差异检查逻辑
  • 只能出现一个顶级组件(不能返回一组元素)
  • 必须纯净,此方法内不要修改组件的 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操作
  • 表单

你可能感兴趣的:(React全家桶)