react入门笔记

一、开发的脚手架（create-react-app）

安装脚手架：

npm install -g create-react-app

开发项目：

create-react-app hello-react

开启项目：

cd hello-react

yarn start 

二、组件

react在js文件里创造组件，通过render渲染组件，通过export导出组件。

import React, { Component } from 'react';

export default class Home extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <h1>Home</h1>
          </div>
        </div>
      </div>
    );
  }
}

三、动态语句

render里添加：

{ false ? "hello" : "world" }

四、通过 Props 传递数据

• this.props

• this.props.children

• Typechecking With PropTypes

五、事件

src/components/Home.js

import React, { Component } from 'react';

import PropTypes from 'prop-types';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.age = this.props.age;
  }

  onMakeOlder() {
    this.age += 3;
    console.log(this);
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <div>your name is {this.props.name}, your age is {this.props.age}</div>
            <button onClick={() => {this.onMakeOlder()}} className="btn btn-primary">Make me older</button>
          </div>
        </div>
      </div>
    );
  }
}

Home.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  user: PropTypes.object,
  children: PropTypes.element.isRequired
};

六、组件的 state 属性

设置和改变初始值：

  constructor(props) {
    super(props);
    this.state = {
      age: props.initialAge
    }
  }

  onMakeOlder() {
    this.setState({
      age: this.state.age + 3
    })
  }

七、react 如何更新 dom

使用虚拟DOM，对该更新的部分进行局部更新，从而达到提升整体性能的效果。

八、无状态组件

有状态组件：可以通过state设置，并且可以通过setState更新值的组件；

无状态组件：也被称为“函数式组件”，即“相同输入，相同输出”，它无状态改变(不会处理用户输入)，也不会有生命周期。

引申：（react创建组件的三种写法）

1.es5写法：const App = React.createClass({...})

2.es6写法：class App extends Component {...}

3.函数式写法：

import React from 'react';

const Header = (props) => {
  return (
    <div>hello world</div>
  );
};

export default Header;

优点：不需要声明类；不需要绑定this关键字

高阶组件，hoc：（返回函数式组件）

tips：无状态组件是没有生命周期的，如果需要加上生命周期，则需要用高阶组件来处理。

九、子组件向父组件传值

父传子：直接在子组件上加参数

子传父：通过回调函数处理

无关联组件：通过redux处理，或见下节

十、组件间传值

原理：

十一、双向数据绑定

一方数据改变，另一方也会发生相应的改变。

常用于获取用户输入数据和显示用户输入数据。

十二、组件生命周期

一个组件的五个状态：

componentWillMount(){}

componentDidMount(){}

componentWillUpdate(nextProps, nextState){}

componentDidUpdate(prevProps, prevState){}

componentWillUnmount(){}