初识react.js

2021-09-09 本文已影响0人又菜又爱分享的小肖

安装

npm i react react-dom

react包是核心，提供创建元素，组件等功能。
react-dom包提供DOM相关功能。

坑点：小伙伴再直接安装时是不会生成node_modules, 需要 npm init -y进行初始化生成package.json文件，在进行安装就可以了

导入

引入react和react-dom的两个文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

创建React元素

    // 创建元素节点
    // 1. 元素名称
    // 2. 元素属性 传对象
    // 3. 元素内容
    let title = React.createElement('li', null, 'hellow react');

渲染到页面

     // 1.要渲染的元素
     // 2.要渲染到那个元素里面 
     ReactDOM.render(title, document.querySelector('#root'));

安装脚手架

初始化项目

npx create-react-app 项目名

npx目的：提升包内提供的命令行工具的使用体验
启动项目 npm start

JSX的使用

产生原因

由于通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不好。

概述

JSX是JavaScript XML 的简写，表示在JavaScript代码中编写HTML格式的代码
优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率。

为什么在脚手架中可以使用JSX语法

JSX 不是标准的ECMAScript语法，它是ECMAScript的语法拓展
需要使用babel编译处理后，才能在浏览器环境中使用
create-react-app脚手架中已经默认有该配置，无需手动配置
编译JSX语法的包： @bable/preset-react

注意点

React元素的属性名使用驼峰命名法
特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
如果没有子节点的React元素可以用 /> 来结束
推荐：使用小括号包裹JSX，从而避免JS中自动插入分号报错

JSX语法

条件渲染

let isLoading = true
let loading = ()=>{
    if(isLoading){
        return <div>Loading...</div>
    }
    return <div>加载完成</div>
}

列表渲染

let arr = [{
  id: 1,
  name: '肖'
}, {
  id: 2,
  name: '小'
}, {
  id: 3,
  name: '笑'
}]
let arrMap = () => {
  return (
    <ul>
      {arr.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  )
}

样式处理

在style里面通过对象的方式传递数据

let arrMap = () => {
  return (
    <ul>
      {arr.map(item => <li key={item.key} style={{ "color": "red", "backgroundColor": "pink" }}> {item.name} </li>)}
    </ul>
  )
}

不过这种方式比较麻烦，不方便阅读，而且还会导致代码比较繁琐，权重性高

类名-className

创建css文件编写样式代码

.container {
    text-align: center
}

在js中进行引入，然后设置类名即可

import './css/index.css'

<li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

React组件

组件是React的主要，使用React就是在用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
特点：可复用、独立、可组合

组件的创建方式

函数创建组件

函数组件：使用JS的函数创建组件
约定1：函数名称必须以大写字母开头
约定2：函数组件必须有返回值，表示该组件的结构
如果返回值为null，表示不渲染任何内容

function Hello() {
  return <div>这是第一个函数组件</div>
}

类组件

使用ES6语法的class创建的组件
约定1：类名称也必须要大写字母开头
约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
约定3：类组件必须提供 render 方法
约定4：render方法中必须要有return返回值

class Hello extends React.Component {
  render() {
    return (
      <div>这是第一个类组件</div>
    )
  }
}

React的事件处理

React事件绑定语法与DOM事件语法相似
语法：on+事件名称=事件处理函数，比如 onClick = function(){}
注意：React事件采用驼峰命名法

class Hello extends React.Component {
  clickHandle(e) {
    console.log('肖帅哥点我了');
  }
  render() {
    return (
      <div onClick={this.clickHandle}>这是第一个类组件</div>
    )
  }
}

事件对象

可以通过事件处理函数的参数获取到事件对象
React中的事件对象叫做：合成事件
合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题
除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
如果你想获取到原生事件对象，可以通过 nativeEvent 属性来进行获取

class Hello extends React.Component {
  clickHandle(e) {
    console.log(e.nativeEvent);
  }
  render() {
    return (
      <div><button onClick={this.clickHandle}>这是第一个类组件</button></div>
    )
  }
}

有状态和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件
状态(state) 即数据
函数组件没有自己的状态，只负责数据展示
类组件有自己的状态，负责更新UI，让页面动起来

State和SetState

state基本使用

状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中可以有多个数据
通过this.state来获取状态

export default class extends React.Component {
    constructor(){
        super()

        // 第一种初始化方式
        this.state = {
            count : 0
        }
    }
    // 第二种初始化方式
    state = {
        count:1
    }
    render(){
        return (
            <div>计数器 :{this.state.count}</div>
        )
    }
}

setState() 修改状态

状态是可变的
语法：this.setState({要修改的数据})
注意：不要直接修改state中的值，这是错误的
setState() 作用：1.修改 state 2.更新UI

抽取事件处理函数

当我们把上面代码的事件处理程序抽取出来后，会报错，找不到this

image.png

原因

在ES6箭头函数中知道，箭头函数本身是没有this的，它只会去向外一层去寻找。
在JSX中写的事件处理函数可以找到this，因为外层是render方法，在render方法里面的this刚好指向的是当前实例对象。

事件绑定this指向

箭头函数

利用箭头函数自身不绑定this的特点

class App extends Component {
  state = {
    count: 1
  }
  add() {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <div>计数器 :{this.state.count}</div>
        <button onClick={() => this.add()}>+1</button>
      </div>
    )
  }
}

利用bind方法

利用原型bind方法是可以更改函数里面this的指向的，所以我们可以在构造中调用bind方法，然后把返回的值赋值给我们的函数即可

class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 1
    }
    // 通过bind方法改变了当前函数中this的指向
    this.add = this.add.bind(this);
  }
  add() {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <div>
        <div>计数器 :{this.state.count}</div>
        <button onClick={this.add}>+1</button>
      </div>
    )
  }
}

class的实例方法

利用箭头函数形式的class实例方法

  // 事件处理程序
  add = () => {
    console.log('事件处理程序中的this：', this)
    this.setState({
      count: this.state.count + 1
    })
  }

表单处理

受控组件

HTML中的表单元素是可输入的，也就是有自己的可变状态
而React中可变状态通常保存在state中，并且只能通过setState() 方法来修改
React讲state与表单元素值value绑定在一起，有state的值来控制表单元素的值
受控组件：值受到react控制的表单元素

image.png

class App extends Component {
  state = {
    txt: ''
  }
  txtChanget = (e) => {
    this.setState({
      txt: e.target.value
    })
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.txt} onChange={this.txtChanget} />
      </div>
    )
  }
}

多表单元素优化

问题：每个表单元素都有一个单独的事件处理函数，这样太繁琐
优化：使用一个事件处理程序同时处理多个表单元素

class App extends Component {
  state = {
    txt: '',
    isChecked: ''
  }
  txtChanget = ({ target }) => {
    let value = target.type == 'checkbox' ? target.checked : target.value;
    this.setState({
      [target.name]: value
    })
  }
  render() {
    console.log(this.state.txt, this.state.isChecked)
    return (
      <div>
        <input type="text" value={this.state.txt} onChange={this.txtChanget} name="txt" />
        <input type="checkbox" value={this.state.isChecked} name="isChecked" onChange={this.txtChanget} />
      </div>
    )
  }
}

非受控组件

说明：借助于ref，使用元素DOM方式获取表单元素值
ref的作用：获取DOM或者组件

class App extends Component {
  txtRef = React.createRef();
  getTxt = () => {
    console.log(this.txtRef.current.value)
  }
  render() {
    return (
      <div>
        <input type="text" ref={this.txtRef} />
        <button onClick={this.getTxt}></button>
      </div>
    )
  }
}

React组件进阶

组件通讯

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯

组件的props

组件时封闭的，要接受外部数据应该通过props来实现
props的作用：接收传递给组件的数据
传递数据：给组件标签添加属性

<Hello name="肖"></Hello>

接收数据：函数组件通过参数 props接收数据，类组件通过 this.props接收数据

函数组件获取

const Hello = (props) => {
  return <div>{props.name}</div>
}

类组件获取

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

特点

可以给组件传递任意类型的数据
props是只读属性，不能对值进行修改
注意：使用类组件时，如果写了构造函数，应该将props传递给super(),否则，无法在构造函数中获取到props，其他的地方是可以拿到的

class Hello extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>{this.props.name}</div>
    )
  }
}

组件通讯的三种方式

父组件传递数据给子组件

父组件提供要传递的state数据
给子组件标签添加属性，值为state中的数据
子组件中通过props接收父组件中传递的数据

子组件传递数据给父组件

// 子组件
class Hello extends React.Component {
  state = {
    name: '肖'
  }
  goApp = () => {
    this.props.getMsg(this.state.name);
  }
  render() {
    return (
      <div>
        <button onClick={this.goApp}></button>
      </div>
    )
  }
}

// 父组件
class App extends Component {
  getChildMsg = (msg) => {
    console.log(msg);
  }
  render() {
    return (
      <div>
        <Hello getMsg={this.getChildMsg}></Hello>
      </div>
    )
  }
}

兄弟组件传递

将共享状态(数据)提升到最近的公共父组件中，由公共父组件管理这个状态
这个称为状态提升
公共父组件职责：1. 提供共享状态 2.提供操作共享状态的方法
要通讯的子组件只需要通过props接收状态或操作状态的方法

// 兄弟组件
class Child1 extends React.Component {
  render() {
    return (
      <h1>计数器：{this.props.count}</h1>
    )
  }
}
class Child2 extends React.Component {
  child2Add = () => {
    this.props.add(1)
  }
  render() {
    return (
      <button onClick={this.child2Add}>+1</button>
    )
  }
}

// 父组件
class App extends Component {
  state = {
    count: 0
  }
  add = (count) => {
    this.setState({
      count: this.state.count + count
    })
  }
  render() {
    return (
      <div>
        <Child1 count={this.state.count}></Child1>
        <Child2 add={this.add}></Child2>
      </div>
    )
  }
}

Context

如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），我们会使用Context来进行传递
作用：跨组件传递数据

const { Provider, Consumer } = React.createContext();
class Child extends React.Component {
  render() {
    return (
      <div>子组件
        <Consumer>
          {data => <span>{data}</span>}
        </Consumer>
      </div>
    )
  }
}
// 父组件
class App extends Component {
  render() {
    return (
      <Provider value="pink">
        <div>
          <Child></Child>
        </div>
      </Provider>
    )
  }
}

props效验

对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，简单来说就是组件调用者可能不知道组件封装着需要什么样的数据
如果传入的数据不对，可能会导致报错
关键问题：组件的使用者不知道需要传递什么样的数据
props校验：允许在创建组件的时候，指定props的类型、格式等

安装

安装包 prop-types
导入prop-types 包
使用组件名.propTypes={} 来给组件的props添加校验规则
校验规则通过PropTypes对象来指定

npm install --save prop-types

import PropTypes from 'prop-types'
// 子组件
class Child extends React.Component {
  render() {
    return (
      <div>
        {this.props.name}
      </div>
    )
  }
}
// 不要写在前面，因为在初始化前是没有Child这个组件的
Child.propTypes = {
  name: PropTypes.string
}
//父组件
class App extends React.Component {
  render() {
    return (
      <div>
        <Child name="xin"></Child>
      </div>
    )
  }
}

常规约束规则

创建的类型： array、bool、func、number、object、string
React元素类型：element
必填项：isRequired
特定结构的对象： shape({})
更多的约束规则
image.png

props的默认值

import PropTypes from 'prop-types'
// 子组件
class Child extends React.Component {
  render() {
    return (
      <div>
        {this.props.name}
      </div>
    )
  }
}
// 不要写在前面，因为在初始化前是没有Child这个组件的
Child.defaultProps = {
  name: '哈哈'
}
//父组件
class App extends React.Component {
  render() {
    return (
      <div>
        <Child></Child>
      </div>
    )
  }
}