React基础

React基础

安装create-react-app

全局安装create-react-app

$ npm install -g create-react-app

如果不想全局安装，可以直接使用npx

$ npx create-react-app your-app-name	也可以实现相同的效果

创建一个项目

$ create-react-app your-app 注意命名方式

Creating a new React app in /dir/your-app.

这需要等待一段时间，这个过程实际上会安装三个东西

• react: react的顶级库
• react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
• react-scripts: 包含运行和打包react应用程序的所有脚本及配置

出现下面的界面，表示创建项目成功:

Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:

  npm start      //  开发环境下运行
    Starts the development server.

  npm run build  // 生产环境打包
    Bundles the app into static files for production.

  npm test       // 测试环境下运行
    Starts the test runner.

  npm run eject  // 配置文件抽离
  	// webpack配置放在了node_modules/react-scripts里面 
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd your-app
  npm start

Happy hacking!

根据上面的提示，通过cd your-app命令进入目录并运行npm start即可运行项目。

React的起源和发展

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

react是一个团队项目，适合做大型企业级项目

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面 UI 的库。可以简单地理解为，React 将将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

React最为重要的一个部分就是： 组件

组件

react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，但create-react-app里已经把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js.

// 引入React
import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。
import ReactDOM from 'react-dom'

// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
// react.render(jsx,容器)
  <h1>欢迎进入React的世界</h1>,
// 渲染到哪里
  document.getElementById('root')
)

写的第一个react文件，当代码写的很多的时候，还在render()里面写就不合适了，在这里我们引入了组件

组件可以分成两种:

函数式组件

import React from 'react'
import ReactDOM from 'react-dom'

const App = (props) => <h1>欢迎进入{props.name}的世界</h1>

ReactDOM.render(
  // React组件的调用方式
  <App name="react" />,
  //这里可以传值
  document.getElementById('root')
)

函数式组件也叫做无状态组件，适用于一些简单逻辑的程序，

但在这里要注意一点，组件的名字一定要大写，否则会报错。

class组件

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      // 注意这里得用this.props.name, 必须用this.props
      <h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}
ReactDOM.render(
  <App name="react" />,
  document.getElementById('root')
)

ES6的加入让JavaScript直接支持使用class来定义一个类，react的第二种创建组件的方式就是使用的类的继承，因为在js中并没有真正的类，每次调用其实就是走了实例化并引入过程：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
  		<h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}

const app = new App({
  name: 'react'
}).render()

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

组建的嵌套组合

组件嵌套的方式就是将子组件写入到父组件的模板中去，且react没有Vue中的内容分发机制（slot），所以我们在一个组件的模板中只能看到父子关系

//由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包一个容器，如果使用div, 会生成多余的一层dom,我们可以使用Fragment对组件进行包裹
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
  render () {
    return (
      <Fragment>
      	<Title />
        <Content />
      </Fragment>
  	)
  }
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
)

调用组件时内部还有内容，正常情况下会被隐藏，若想让他显示需要在该组件定义时留好空间

使用{ this.props.children }

class Son extends Component{
    render(){
        return (
            <Fragment>
               
            <h3> 我是子组件 </h3>
            { this.props.children }
            </Fragment>
        )
    }
}

class Father extends Component{
    render(){
        return (
            <Fragment>
                <p> 父组件 </p>
                <Son>
                    <span> 子组件姓名 </span>
                    <span> 子组件年龄 </span>
                    <span> 子组件性别 </span>
                </Son>
            </Fragment>
        )
    }
}

组件的数据挂载

React中数据分为两个部分

1. 属性
2. 状态

经验： 频繁变化的就写成状态

属性(props)

属性一般是从外部传入的组件，内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

外部传入

class App extends Component {
  render () {
    return (
  		<Fragment>
      	<Title name="React" />
        <Content name="React.js" />
      </Fragment>
  	)
  }
}

内部设置

设置组件的默认props

class Title extends Component {
  // 使用类创建的组件，直接在这里写static方法，创建defaultProps
  static defaultProps = {
    name: 'React'
  }
  render () {
    return (
  		<h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}

const Content = (props) => {
  return (
    <p>{props.name}是一个构建UI的库</p>
  )
}

// 使用箭头函数创建的组件，需要在这个组件上直接写defaultProps属性
Content.defaultProps = {
  name: 'React.js'
}

属性vs状态

相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）

不同点：

1. 属性能从父组件获取，状态不能
2. 属性可以由父组件修改，状态不能
3. 属性能在内部设置默认值，状态也可以
4. 属性不在组件内部修改，状态要改 【 属性只能外部修改，内部不允许修改】
5. 属性能设置子组件初始值，状态不可以
6. 属性可以修改子组件的值，状态不可以

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改

state 中状态可以通过 this.setState方法进行更新，setState 会导致组件的重新渲染。

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。

无状态组件也就是函数式组件

有状态组件就是类组件

react性能优化一个方案： 就是多使用无状态组件（ 函数式组件 ）

状态提升

如果有多个组件共享一个数据，把这个数据放到共同的父级组件中来管理