react基础知识总结（持续更新ing...）

本文在github做了收录 github.com/Michael-lzg…

React 的特点

使用 JSX 语法创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
性能高的让人称赞：通过 diff 算法和虚拟 DOM 实现视图的高效更新

为什么要用 React

使用组件化开发方式，符合现代 Web 开发的趋势
技术成熟，社区完善，配件齐全，适用于大型 Web 项目（生态系统健全）
由 Facebook 专门的团队维护，技术支持可靠
ReactNative - Learn once, write anywhere: Build mobile apps with React
使用方式简单，性能非常高，支持服务端渲染
React 非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目

创建组件的两种方式

通过 JS 函数创建（无状态组件）
通过 class 创建（有状态组件）

JS 函数创建

函数名称必须为大写字母开头，React 通过这个特点来判断是不是一个组件
函数必须有返回值，返回值可以是：JSX 对象或 null
返回的 JSX，必须有一个根元素
组件的返回值使用()包裹，避免换行问题

function LearningList(props) {
  return (
     LearningList for {props.name}
 
        Vue
        React
        Angular
      
 
  )
}

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

class 创建

在 es6 中 class 仅仅是一个语法糖，不是真正的类，本质上还是构造函数+原型实现继承

class LearningList extends React.Component {
  constructor(props) {
    super(props)
  }
  // class创建的组件中 必须有render方法 且显示return一个react对象或者null
  render() {
    return (
       LearningList for {props.name}
 
          Vue
          React
          Angular
        
 
    )
  }
}

jsx 语法

jsx 语法是一种 JavaScript 语法扩展，在 React 中可以方便地用来描述 UI。比如下面就是一段 jsx 语法

const element = Hello, world!

上面的代码实质上等价于：

var element = React.createElement('h1', null, 'Hello, world!')

jsx 的书写规范

jsx 的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个 div（或者使用 Fragment）
jsx 中的标签可以是单标签，也可以是双标签；如果是单标签，必须以/>结尾
jsx 的外层包裹一个小括号()，这样可以方便阅读，并且 jsx 可以进行换行书写
在{}内部，可以写任何符合 JS 规范的代码；如果要写注释，注释必须放到 {} 内部

jsx 中嵌入表达式

在 jsx 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式，它可以是

运算表达式
三元运算符
执行一个函数

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      firstName: 'kobe',
      lastName: 'bryant',
      age: 20,
    }
  }

  sayHello(name) {
    return 'Hello ' + name
  }

  render() {
    return (
       {this.state.firstName + ' ' + this.state.lastName}
 {this.state.age >= 18 ? '成年人' : '未成年人'}
 {this.sayHello('lzg')}
 
    )
  }
}

jsx 条件渲染

1、两个组件二选一的渲染

class HelloMessage extends React.Component {
  render() {
    let userMessage
    if (this.props.loggedIn) {
      userMessage = (
       Welcome back!
      )
    } else {
      userMessage = (
        Please sign up.;
      )
    }

    return (
       My Super React App {userMessage}
      
    )
  }
}

2、一个组件有无的渲染

function MessageList(props) {
  const unreadMessages = props.unreadMessages
  return (
     Hello!
 {unreadMessages.length > 0 && You have {unreadMessages.length} unread messages.}
    
  )
}

jsx 列表循环

在jsx语法中，循环渲染是利用数组的遍历 map() 方法返回一个集合。

遍历时必须有唯一索引 key 提高遍历的效率。一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串，万不得已可以使用 index。

class Admin extends Component {
  constructor(props) {
    super(props)
    this.state = {
      menus: [
        { icon: require('../imag/home/[email protected]'), title: '菜单1' },
        { icon: require('../imag/home/[email protected]'), title: '菜单2' },
        { icon: require('../imag/home/[email protected]'), title: '菜单3' },
        { icon: require('../imag/home/[email protected]'), title: '菜单4' },
      ],
    }
  }
  renderList(value, index) {
    return (
       张三
 18岁
 
    )
  }

  render() {
    return (
       
          {[1, 2, 3, 4, 5].map((value, index) => {
            return this.renderList(value, index)
          })}
        
 
          {this.state.menus.map((value, index) => {
            return (
              
                
                {value.title}
              
            )
          })}
        
       )
  }
}

接收数据 props

我们想要在组件之间进行传值，那么 props 属性就起到了这个作用。react 的每个组件都可以接受一个 props 参数，它是一个对象，包含了所有你对这个组件的配置。

特点

React 把传递给组件的属性转化为一个对象并交给 props
props 是只读的，无法给 props 添加或修改属性

function Person(props) {
  return (
     姓名: {props.name}
 年龄: {props.age}
 
  )
}

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

组件状态 state

如果需要定义组件的自定义属性，需要在组件的 constructor 构造函数里面去定义 state

特点

只有通过 class 创建的组件才具有 state
state 是私有的，完全由组件来控制
不要在 state 中添加 render() 方法中不需要的数据，会影响渲染性能！
不要在 render() 方法中调用 setState() 方法来修改 state 的值

state 和 props 的区别

props 是组件对外的接口，state 是组件对内的接口。两者主要的区别： state 是可变的，是组件内部维护的一组返回 ui 组件的集合，而 props 是组件的只读属性，组件内不能直接修改 props，只能在组件的上层修改。

创建 state

如果需要定义组件的自定义属性，在组件的 constructor 构造函数里面去定义 state

class Mycom extends React.Component {
  constructor(props) {
    super(props)
    //给this.state赋值一个对象，对象的属性就是组件的自定义属性
    this.state = {
      name: 'lzg',
    }
  }
}

修改 state

不能直接去修改 state 的值，否则数据无法驱动关联，需要使用 setState，setState 方法接收一个参数，参数为一个对象，类似于小程序原生的 setData。

//  错误方式
this.state.name = 'lzg'

//  正确方式
this.setState({ name: 'lzg' })

使用 this.setState()的第二种形式总是更安全的，因为更新的 props 和状态是异步的。这里，我们根据这些 props 更新状态。

// 错误方式
this.setState({
  total: this.state.total + this.props.count,
})

// 正确方式
this.setState((state, props) => {
  total: state.total + props.count
})

另外，setState 还可以接收第二个参数，第二个参数为一个回调函数

this.setState(
  {
    name: 'lzg',
  },
  () => {
    console.log('state值修改成功，现在的name值为' + this.state.name)
  }
)

为啥不能直接修改 state，要 setState 一下呢？setState 做的事情不仅仅只是修改了 this.state 的值，另外最重要的是它会触发 React 的更新机制，会进行 diff ，然后将 patch 部分更新到真实 dom 里。

事件绑定

1、在调用的时候使用 bind 绑定 this

class Foo extends React.Component {
  handleClick() {
    this.setState({ name: 'lzg' })
  }

  render() {
    return 
  }
}

2、在构造函数中使用 bind 绑定 this

class Foo extends React.Component {
  constuctor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState({ name: 'lzg' })
  }

  render() {
    return 
  }
}

3、使用箭头函数绑定 this

class Foo extends React.Component {
  handleClick() {
    this.setState({ name: 'lzg' })
  }

  render() {
    return 
  }
}

4、public class fields 型

class Foo extends React.Component {
  handleClick = () => {
    this.setState({ name: 'lzg' })
  }

  render() {
    return 
  }
}

react 样式

直接写行内样式：

export const Footer = () => {
  return All Rights Reserved 2019
}

抽离为对象形式

import React from 'react'

const footerStyle = {
  backgroundColor: 'green',
  fontSize: '12px',
  color: 'orange',
  fontWeight: 'bold',
}

export const Footer = () => {
  return All Rights Reserved 2019
}

使用样式表定义样式：

import '../css/comment.css'

export const Footer = () => {
  return All Rights Reserved 2019
}

生命周期函数

组件的生命周期包含三个阶段：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）

Mounting 依次调用以下函数
- constructor():ES6 类的构造函数（为了初始化 state 或绑定 this）
- getInitialState():ES5 中初始化 state。
- getDefaultProps():ES5 中初始化 props。在 ES6 中使用 defaultProps()方法。
- componentWillMount():在组件被挂载前调用。只执行一次。
- render():渲染组件，必须实现该方法。
- componentDidMount():在组件装载后调用。这时已经生成了真实的 DOM 节点。只执行一次。
Updating 依次调用以下函数
- componentWillReceiveProps() 组件接受到新的 props 前触发这个方法
- shouldComponentUpdate() 根据这个方法的返回值决定是否重新渲染组件，返回 true 重新渲染，否则不渲染
- componentWillUpdate() 组件将要更新
- render() 重新渲染组件，与 Mounting 阶段的 render 是同一个函数
- componentDidUpdate() 组件已经被更新
Unmounting
- componentWillUnmount() 卸载组件；清除定时器，清除 dom

PropTypes

随着时间的推移，应用程序会变得越来越大，因此类型检查非常重要。PropTypes 为组件提供类型检查，并为其他开发人员提供很好的文档。如果 react 项目不使用 Typescript，建议为组件添加 PropTypes。

// 旧的写法
class PropTypeOne extends React.Component {
  render() {
    return (
       {this.props.name}
 {this.props.email}
 
    )
  }
}

PropTypeOne.propTypes = {
  name: PropTypes.string,
  email: function (props, propName, componentName) {
    if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(props[propName])) {
      return new Error('组件' + componentName + '里的属性' + propName + '不符合邮箱的格式')
    }
  },
}

// 新的写法
class PropTypeTwo extends React.Component {
  static propTypes = {
    name: PropTypes.string,
  }
  render() {
    return (
       {this.props.name}
 
    )
  }
}

当传入的 prop 值类型不正确时，JavaScript 控制台将会显示警告。出于性能方面的考虑，propTypes 仅在开发模式下进行检查。

您可以通过配置特定的 defaultProps 属性来定义 props 的默认值：

class Greeting extends React.Component {
  render() {
    return Hello, {this.props.name}
  }
}

// 指定 props 的默认值：
Greeting.defaultProps = {
  name: 'Stranger',
}

// 渲染出 "Hello, Stranger"：
ReactDOM.render(, document.getElementById('app'))

受控与非受控组件

受控组件

我们要经常使用表单来搜集用户输入，例如

class NameForm extends React.Component { constructor(props) { super(props) this.handleSubmit = this.handleSubmit.bind(this) } handleSubmit(event) { alert('A name was submitted: ' + this.input.value) event.preventDefault() } render() { return ( Name: (this.input = input)} /> ) } }

class Child extends React.Component { constructor(props) { super(props) this.myRef = React.createRef() } componentDidMount() { console.log(this.myRef.current) } render() { return } }

import { BrowserRouter, Route, Link, Redirect } from 'react-router-dom' class MyRouter extends React.Component { render() { return ( router1 router2 router3 ) } }

import { Route } from 'react-router-dom' function Custom() { return ( { //isLogin判断用户是否登录，如果登录了渲染首页，没有登录渲染登录 if (isLogin) { return } else { return } }} /> ) }

import React,{Component} from 'react' import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' //引入withRouter import One from './One' import NotFound from './NotFound' class App extends Component{ //此时才能获取this.props,包含（history, match, location）三个对象 console.log(this.props); //输出{match: {…}, location: {…}, history: {…}, 等} render(){ return ( 用户列表公司列表 ) } } export default withRouter(App); //这里要执行一下WithRouter

react基础知识总结（持续更新ing...）

React 的特点

创建组件的两种方式

JS 函数创建

LearningList for {props.name}

class 创建

LearningList for {props.name}

jsx 语法

Hello, world!

jsx 的书写规范

jsx 中嵌入表达式

{this.state.firstName + ' ' + this.state.lastName}

{this.state.age >= 18 ? '成年人' : '未成年人'}

{this.sayHello('lzg')}

jsx 条件渲染

Welcome back!

Please sign up.

My Super React App

Hello!

You have {unreadMessages.length} unread messages.

jsx 列表循环

接收数据 props

组件状态 state

state 和 props 的区别

创建 state

修改 state

事件绑定

react 样式

生命周期函数

PropTypes

Hello, {this.props.name}

受控与非受控组件

受控组件

非受控组件

ref

字符串用法

ref 作为回调函数

React.createRef()

react-router

基本使用：

路由跳转

路由传参

路由守卫

withRouter

推荐文章

你可能感兴趣的:(前端,react.js)