关于前端:react基础知识总结持续更新ing

1次阅读

共计 12411 个字符，预计需要花费 32 分钟才能阅读完成。

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

应用 JSX 语法创立组件，实现组件化开发，为函数式的 UI 编程形式关上了大门
性能高的让人称誉：通过 diff 算法和虚构 DOM 实现视图的高效更新

为什么要用 React

应用组件化开发方式，合乎古代 Web 开发的趋势
技术成熟，社区欠缺，配件齐全，实用于大型 Web 我的项目（生态系统健全）
由 Facebook 专门的团队保护，技术支持牢靠
ReactNative – Learn once, write anywhere: Build mobile apps with React
应用形式简略，性能十分高，反对服务端渲染
React 十分火，从技术角度，能够满足好奇心，进步技术水平；从职业角度，有利于求职和降职，有利于参加后劲大的我的项目

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

函数名称必须为大写字母结尾，React 通过这个特点来判断是不是一个组件
函数必须有返回值，返回值能够是：JSX 对象或 null
返回的 JSX，必须有一个根元素
组件的返回值应用 () 包裹，防止换行问题

function LearningList(props) {
  return (<div className="list"> <h1>LearningList for {props.name}</h1> <ul>
        <li>Vue</li>
        <li>React</li>
        <li>Angular</li>
      </ul> </div>
  )
}

ReactDOM.render(<Welcome name="lzg" />, document.getElementById('app'))

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

class LearningList extends React.Component {constructor(props) {super(props)
  }
  // class 创立的组件中 必须有 render 办法 且显示 return 一个 react 对象或者 null
  render() {
    return (<div className="list"> <h1>LearningList for {props.name}</h1> <ul>
          <li>Vue</li>
          <li>React</li>
          <li>Angular</li>
        </ul> </div>
    )
  }
}

jsx 语法是一种 JavaScript 语法扩大，在 React 中能够不便地用来形容 UI。比方上面就是一段 jsx 语法

const element = <h1>Hello, world!</h1>

下面的代码本质上等价于：

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

jsx 的顶层只能有一个根元素，所以咱们很多时候会在外层包裹一个 div（或者应用 Fragment）
jsx 中的标签能够是单标签，也能够是双标签；如果是单标签，必须以 /> 结尾
jsx 的外层包裹一个小括号()，这样能够不便浏览，并且 jsx 能够进行换行书写
在 {} 外部，能够写任何合乎 JS 标准的代码；如果要写正文，正文必须放到 {} 外部

在 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 (<div> <h2>{this.state.firstName + '' + this.state.lastName}</h2> <h2>{this.state.age >= 18 ?' 成年人 ':' 未成年人 '}</h2> <h2>{this.sayHello('lzg')}</h2> </div>
    )
  }
}

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

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

    return (<div> <h1>My Super React App</h1> {userMessage}
      </div>
    )
  }
}

2、一个组件有无的渲染

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

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

遍历时必须有惟一索引 key 进步遍历的效率。一个元素的 key 最好是这个元素在列表中领有的一个举世无双的字符串，万不得已能够应用 index。

class Admin extends Component {constructor(props) {super(props)
    this.state = {
      menus: [{ icon: require('../imag/home/ic_noti_block@2x.png'), title: '菜单 1' },
        {icon: require('../imag/home/ic_noti_block@2x.png'), title: '菜单 2' },
        {icon: require('../imag/home/ic_noti_block@2x.png'), title: '菜单 3' },
        {icon: require('../imag/home/ic_noti_block@2x.png'), title: '菜单 4' },
      ],
    }
  }
  renderList(value, index) {
    return (<li key={index}> <p> 张三 </p> <p>18 岁 </p> </li>
    )
  }

  render() {
    return (
      <div> <ul>
          {[1, 2, 3, 4, 5].map((value, index) => {return this.renderList(value, index)
          })}
        </ul> <ul>
          {this.state.menus.map((value, index) => {
            return (<li key={index}>
                <img src={value.icon} width="30" />
                <div>{value.title}</div>
              </li>
            )
          })}
        </ul>
      </div> )
  }
}

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

特点

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

function Person(props) {
  return (<ul> <li> 姓名: {props.name}</li> <li> 年龄: {props.age}</li> </ul>
  )
}

ReactDOM.render(<Welcome name="lzg" age="18" />, document.getElementById('app'))

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

特点

只有通过 class 创立的组件才具备 state
state 是公有的，齐全由组件来管制
不要在 state 中增加 render() 办法中不须要的数据，会影响渲染性能！
不要在 render() 办法中调用 setState() 办法来批改 state 的值

props 是组件对外的接口，state 是组件对内的接口。两者次要的区别：state 是可变的，是组件外部保护的一组返回 ui 组件的汇合，而 props 是组件的只读属性，组件内不能间接批改 props，只能在组件的下层批改。

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

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

不能间接去批改 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 <button onClick={this.handleClick.bind(this)}>Click me</button>
  }
}

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 <button onClick={this.handleClick}>Click me</button>
  }
}

3、应用箭头函数绑定 this

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

  render() {return <button onClick={(e) => this.handleClick(e)}>Click me</button>
  }
}

4、public class fields 型

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

  render() {return <button onClick={this.handleClick}>Click me</button>
  }
}

间接写行内款式：

export const Footer = () => {return <div style={{{color:'orange', fontSize:'12px'}}>All Rights Reserved 2019</div>
}

抽离为对象模式

import React from 'react'

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

export const Footer = () => {return <div style={footerStyle}>All Rights Reserved 2019</div>
}

应用样式表定义款式：

import '../css/comment.css'

export const Footer = () => {return <div className="footer">All Rights Reserved 2019</div>}

组件的生命周期蕴含三个阶段：创立阶段（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 为组件提供类型查看，并为其余开发人员提供很好的文档。如果 react 我的项目不应用 Typescript，倡议为组件增加 PropTypes。

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

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 (<div> <div>{this.props.name}</div> </div>
    )
  }
}

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

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

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

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

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

咱们要常常应用表单来收集用户输出，例如 <input> <select> <textearea> 等元素都要绑定一个 change 事件，当表单的状态发生变化，就会触发 onChange 事件，更新组件的 state。这种组件在 React 中被称为受控组件，在受控组件中，组件渲染出的状态与他的 value 或 checked 属性绝对应，react 通过这种形式打消了组件的部分状态，使整个状态可控。react 官网同样举荐应用受控表单组件。

import React, {Component} from 'react'
export default class MyInput extends Component {handleContentChange = (e) => {
    this.setState({content: e.target.value,})
  }
  render() {
    return (<div> <input type="text" value={this.state.value} onChange={this.handleContentChange} />
      </div> )
  }
}

受控组件更新 state 的流程：

能够通过初始 state 中设置表单的默认值
每当表单的值发生变化时，调用 onChange 事件处理器
事件处理器通过事件对象 e 拿到扭转后的状态，并更新组件的 state
一旦通过 setState 办法更新 state，就会触发视图的从新渲染，实现表单组件的更新

react 中数据是单项流动的，从示例中，咱们看进去表单的数据来源于组件的 state，并通过 props 传入，这也称为 单向数据绑定 。而后咱们又通过 onChange 事件处理器将新的数据写回到 state，实现了 双向数据绑定。

如果一个表单组件没有 value props（单选和复选按钮对应的是 checked props）时，就能够称为非受控组件. 在非受控组件中，咱们能够应用一个 ref 来从 DOM 取得表单值。而不是为每个状态更新编写一个事件处理程序。

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 (<form onSubmit={this.handleSubmit}> <label>
          Name:
          <input type="text" ref={(input) => (this.input = input)} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    )
  }
}

React 反对一种十分非凡的属性 Ref，你能够用来绑定到 render() 输入的任何组件上。

通过 this.refs['inputRef']来拜访

<input ref="inputRef" />

class AutoFocusTextInput extends Component {componentDidMount(){this.textInput.focus();
  }
  render(){
    return (<Input ref={(input) => {this.textInput = input}}>
    )
  }
}

父组件的 ref 回调函数能够应用子组件的 DOM。

function CustomTextInput(props) {
  return (<div> <input ref={props.inputRef} />
    </div> )
}

class Parent extends React.Component {render() {return <CustomTextInput inputRef={(el) => (this.inputElement = el)} />
  }
}

在 React 16.3 版本后，应用此办法来创立 ref。将其赋值给一个变量，通过 ref 挂载在 dom 节点或组件上，该 ref 的 current 属性将能拿到 dom 节点或组件的实例

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

react-router-dom 是应用程序中路由的库。React 库中没有路由性能，须要独自装置 react-router-dom。

react-router-dom 提供两个路由器 BrowserRouter 和 HashRoauter。前者基于 url 的 pathname 段，后者基于 hash 段。

npm install react-router-dom --save

import {BrowserRouter, Route, Link, Redirect} from 'react-router-dom'

class MyRouter extends React.Component {render() {
    return (
      <BrowserRouter> <Link to="/">router1</Link> &nbsp;&nbsp; <Link to="/router2">router2</Link> &nbsp;&nbsp; <Link to="/router3">router3</Link> &nbsp;&nbsp; <hr /> <Redirect exact from="/" to="/router1" />
        <Route path="/router1" component={router1}></Route>
        <Route path="/router2" component={router2}></Route>
        <Route path="/router3" component={router3}></Route>
      </BrowserRouter> )
  }
}

1、用 Link 标签跳转

import {BrowserRouter, Route, Link, Redirect} from 'react-router-dom'

class MyRouter extends React.Component {render() {
    return (
      <BrowserRouter> <Link to="/">router1</Link> &nbsp;&nbsp; <Link to="/router2">router2</Link> &nbsp;&nbsp; <Link to="/router3">router3</Link> &nbsp;&nbsp; <hr /> <Redirect exact from="/" to="/router1" />
        <Route path="/router1" component={router1}></Route>
        <Route path="/router2" component={router2}></Route>
        <Route path="/router3" component={router3}></Route>
      </BrowserRouter> )
  }
}

2、编程式导航

路由组件能够间接从 this.props.history 上拿到 history
非路由组件无奈间接拿到 history，须要配合 withRouter

this.props.history.push(url)

this.props.history.go(-1)

1.params

<Route path='/path/:name' component={Path}/>
<link to="/path/123">xxx</Link>

this.props.history.push({pathname:"/path/" + name});
// 读取参数用:this.props.match.params.name

2.query

<Route path='/query' component={Query}/>
<Link to={{pathname : '/query' , query : { name : 'sunny'}}}></Link>

this.props.history.push({pathname:"/query",query: { name : 'sunny'}});
// 读取参数用:this.props.location.query.name

3.state

<Route path='/sort' component={Sort}/>
<Link to={{pathname : '/sort' , state : { name : 'sunny'}}}></Link>

this.props.history.push({pathname:"/sort",state : { name : 'sunny'}});
// 读取参数用: this.props.location.query.state

4.search

<Route path='/web/search' component={Search}/>
<link to="web/search?id=12121212">xxx</Link>

this.props.history.push({pathname:`/web/search?id ${row.id}`});
// 读取参数用: this.props.location.search

Route 组件能够接管一个 Component 组件，当 path 匹配上的时候，这个 Route 组件就会被渲染进去。咱们还能够在门路匹配之后做一点事件，这一点相似于 Vue 中的路由守卫。

用到的还是 Route 这个组件，只不过这次组件不通过 Component 去传递数据，通过 render 属性。

import {Route} from 'react-router-dom'

function Custom() {
  return (
    <Route
      path="/index"
      Render={() => {
        //isLogin 判断用户是否登录，如果登录了渲染首页，没有登录渲染登录
        if (isLogin) {return <Index></Index>} else {return <Login></Login>}
      }}
    />
  )
}

高阶组件中的 withRouter, 作用是将一个组件包裹进 Route 外面, 而后 react-router 的三个对象 history, location, match 就会被放进这个组件的 props 属性中。

默认状况下必须是通过路由匹配渲染的组件才存在 this.props，才领有路由参数，能力应用编程式导航的写法，执行 this.props.history.push('/detail') 跳转到对应路由的页面，然而不是所有组件都间接与路由相连（通过路由跳转到此组件）的，当这些组件须要路由参数时，应用 withRouter 就能够给此组件传入路由参数，此时就能够应用 this.props。

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 (<div className='app'> <NavLink to='/one/users'> 用户列表 </NavLink> <NavLink to='/one/companies'> 公司列表 </NavLink> <Switch>
         <Route path='/one/:type?' component={One} />
         <Redirect from='/' to='/one' exact />
         <Route component={NotFound} />
      </Switch>
    </div>)
  }
}
export default withRouter(App);  // 这里要执行一下 WithRouter

谈谈数据状态治理和实现一个简易版 vuex
总结 18 个 webpack 插件，总会有你想要的！
搭建一个 vue-cli4+webpack 挪动端框架（开箱即用）
从零构建到优化一个相似 vue-cli 的脚手架
封装一个 toast 和 dialog 组件并公布到 npm
从零开始构建一个 webpack 我的项目
总结几个 webpack 打包优化的办法
总结 vue 常识体系之高级利用篇
总结 vue 常识体系之实用技巧
总结 vue 常识体系之根底入门篇
总结挪动端 H5 开发罕用技巧（干货满满哦！）

正文完

前端

发表至：前端

2020-09-16

0

关于前端:解决Element-UI-日期选择器自定义修改多个样式

关于前端:🔥Electron打造你自己的录屏软件🔥

关于前端:仅用一个HTML标签实现带动画的抖音LOGO

关于前端:2年过去了有谁还记得曾想取代Nodejs的他

关于spring:Spring-5-中文解析数据存储篇Spring框架的事物支持模型的优势

关于前端:react基础知识总结持续更新ing

React 的特点

创立组件的两种形式

JS 函数创立

class 创立

jsx 语法

jsx 的书写标准

jsx 中嵌入表达式

jsx 条件渲染

jsx 列表循环

接收数据 props

组件状态 state

state 和 props 的区别

创立 state

批改 state

事件绑定

react 款式

生命周期函数

PropTypes

受控与非受控组件

受控组件

非受控组件

ref

字符串用法

ref 作为回调函数

React.createRef()

react-router

根本应用：

路由跳转

路由传参

路由守卫

withRouter

举荐文章

站内搜索