快速入门React

时间 2019-11-08

标签快速入门 react 栏目 React 繁體版

原文原文链接

安装react

npm install creat-react-app -g
html

这里直接安装react的一个脚手架，里面包含了要用到的许多东西，帮助快速入门reactreact

建立新项目

create-react-app my-app
cd my-app
npm start

用脚手架建立一个新的单页应用，进到项目里面后start跑起来git

react组件

引入Component组件
JSX语法
渲染虚拟DOM
组件props
组件state
组件嵌套
组件生命周期

组件总览

首先在头部引入Component组件，而后经过class方式继承Component,最后将组件导出，便可成为单独组件使用。须要注意的地方就是组件的首字母必定要大写github

//引入Component
import {Component} from 'react';

//首字母大写！
class MyComponent extends Component{
    
    consturtion(props){
        super(props);
        this.state={
            isShow:true
        }
    }
    /*react生命周期函数*/
    componentWillMount() {}

    componentDidMount() {}
    
    componentWillReceiveProps() {}
    
    shouldComponentUpdate() {}
    
    componentWillUpdate() {}
    
    componentDidUpdate() {}
    
    componentWillUnmount() {}
    //经过render函数能够将JSX语法渲染成真实dom
    render() {      
        return (
            <div>
                <h1>我是组件</h1>
                <p>{this.props.test}</p>
                <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>点我</button>
                <p>{this.state.isShow}</p>
            </div>
        )
    }
}

//首字母大写！
class Parent extends Component{
    return <MyComponent test="我是props" />
}

export default Parent;

JSX语法

确实说白了就是html标签写到js中去，而后经过babel转译成react虚拟DOM对象，而后再渲染。
上例中算法

render() {      
    return (
        <div>我是组件，{this.props.test}</div>
    )
}

其实用的就是JSX语法，那么在标签内能够嵌套js语句。想要嵌套js语句的时候须要用{}包起来。npm

渲染虚拟DOM

关于这一点，要详细提及来还挺长的。考虑到是快速入门，因而乎咱们就记住一点，当修改值须要react从新渲染的时候，react的机制是不会让他所有从新渲染的，它只会把你修改值所在的dom从新更新。这也是为何react性能快的一大缘由。这个选择渲染dom的算法叫作diff算法，若是要学习react就不能把这个给忘记。在往后须要好好把这方面的知识补全。这里还要补充的就是，react把JSX语法先转成react对象，而后经过内部建立节点插入到dom当中。仍是考虑到快速，因此该节篇幅就不继续展开了，这些知识往后须要好好补全。redux

组件props

props若是接触过Vue的话，应该会很好理解这个概念。没接触过也没关系，由于是比较容易接受的。咱们这么理解，其实就是父组件传给子组件的一些东西，能够是基本数据类型，也能够是引用数据类型，也就是说啥均可以传。子组件能够经过this.props这个对象来获取父组件传下来的值性能优化

仍是看回上面的例子babel

class MyComponent extends Component{
    render() {
        //这里能够拿到
        return (
            <div>
                <h1>我是组件</h1>
                <p>{this.props.test}</p>
                <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>点我</button>
                <p>{this.state.isShow}</p>
            </div>
        )
    }
}
class Parent extends Component{
    render() {
        //经过父组件传进去
        return <MyComponent test="我是props" />
    }
}

组件state

组件state是状态，这里存放的就是该组件的一些会改变的变量，就是状态。好比判断组件属性变化，获取表单值等。修改state会引发react从新渲染，也就是更新状态会引发组件刷新。咱们能够经过setState()这个函数来设置state的值。不过要注意的是setState()这个函数是异步函数。下面仍是看上面的例子react-router

class MyComponent extends Component{
    consturtion(props){
        super(props);
        this.state={
            isShow:true
        }
    }
    render() {
        return (
            <div>
                <h1>我是组件</h1>
                <p>{this.props.test}</p>
                <button onClick={()=>{
                    //点击后可修改state值
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>点我</button>
                <p>{this.state.isShow}</p>
            </div>
        )
    }
}

组件的嵌套

这个意思实际上就是在一个组件里面能够用别的组件的意思。所以你能够把组件划分得比较细致，以便更多的复用。

class Parent extends Component{
    render() {
        //使用了MyComponent组件
        return <MyComponent test="我是props" />
    }
}

组件生命周期

在这里就说一下组件的生命周期函数吧

componentWillMount() {}组件挂载前
componentDidMount() {}组件挂载完执行
componentWillReceiveProps() {}组件更新数据时执行，props、state
shouldComponentUpdate() {}组件须要更新时执行
componentWillUpdate() {}组件更新前执行
componentDidUpdate() {}组件更新后执行
componentWillUnmount() {}组件销毁前执行

下面一张图解释生命周期

固然想要暂时略过也不是不可，但往后须要了解。

　16.7 生命周期

装载

constructor
static getDerivedStateFromProps()
render()
componentDidMount()

组件更新

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载

componentWillUnmount()

错误处理

static getDerivedStateFromError()
componentDidCatch()

constructor

constructor能够初始化state

constructor(props) {
  super(props);
  this.state = { color: '#333' };
}

不要直接把props附给state!此模式仅用于你但愿故意忽略属性更新。

constructor(props) {
  super(props);
  // Don't do this!
  this.state = { color: props.color };
}

　componentDidUpdate()

能够用做异步发请求，该生命周期在组件更新时候给多了一次机会操做ｄｏｍ

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

为了防止重复渲染,若有setstate必须包括在条件中!