React的知识点

揣着一份梦想和九份坚强
720 阅读2分钟

首先先去谷歌装个 React Developer Tools 这是react开发必备哈

1、脚手架的安装

创建个人首个脚手架 react项目

npm install create-react-app -g
npx create-react-app my-app

注意：这里名字严禁出现大写，只能是小写

快捷方式 rcc

2、使用scss

create-react-app 脚手架中已经添加了 sass-loader 的支持，
所以只需要安装 node-sass 插件即可

3、使用less

由于 create-react-app 脚手架中并没有配置关于 less 文件的解析，
所以我们需要自己进行配置。需要安装的插件 less， less-loader。
$ yarn install less less-loader --save

  1. 在命令行运行 npm run eject 命令（如有需要，不可逆）
  2. 运行完成之后，打开 config 目录下的 webpack.config.js 文件，找到 // style files regexes 注释位置，仿照其解析 sass 的规则，在下面添加两行代码

  3. // 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

  4. 找到 rules 属性配置，在其中添加 less 解析配置

  5. !!!注意： 
这里有一个需要注意的地方，
下面的这些 less 配置规则放在 sass 的解析规则下面即可，
如果放在了 file-loader 的解析规则下面，less 文件解析不会生效。

// Less 解析配置
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    )
}

可以使用 .less 文件了，这里特别感谢 暖生  此文章来源 

4、react-router-dom 路由

yarn add react-router-dom

HashRouter 与 BrowserRouter 的区别
hash 是锚点链接的形式




NavLink Route 如果有 / 目录需要 加属性 exact 精准匹配

strict 更精准
/a/
/a 渲染不同的 需要 加 strict

404 找不到 用 Switch

重定向

5、父子组件传参以及 校验类型

这里特别说明 react 是不允许 子组件直接去改变父组件的值 需要 父组件 把方法传递给子组件，子组件调用父组件的方法来处理

prop-types是自带的直接引就好

import React, { Component } from 'react'import PropTypes from "prop-types";
export default class Demo extends Component {  
    componentDidMount() {    
        console.log(this.props.content6)  
    }  
    render() {    
    return (     
     <div>        
        111 { this.props.name }      
        </div>    )  
    }
    }
    Demo.propTypes = {  
    content: PropTypes.number, // 数字类型  
    content2: PropTypes.string, // 字符串类型  
    content3: PropTypes.array, // 数组类型  
    content4: PropTypes.bool, // 布尔值  
    content5: PropTypes.func,// 函数类型  
    content6: PropTypes.object, // 对象类型  
    content7: PropTypes.string.isRequired, // 必传 必须要有参数且是 自己定义的类型这里 以string 来举例子 }
Demo.defaultProps = { // 默认的值 如果父组件不传就用这个值，传了就用父组件的值  name: "你好"}



6、 ref的使用 获取 dom 元素  

大家官网可以看到 16版本之后 React.createRef() 或者 ref={ e => {this.input = e} }

已经马上要去除 this.refs.dom 这种方式 最好不要用

// 1、推荐以回调函数获取赋值
<input type="text" ref={ e => {this.input = e}   } onChange={ this.change.bind(this) } />

或者2、利用 React.createRef();
constructor(props) {   
 super(props)    
 this.myRef = React.createRef(); 
}
<div ref={this.myRef}></div>
console.log(this.myRef.current)





7、a标签 href="javascript:;" 报错的问题

<a href="javascript:;">12121</a> // 报错
<a href={void(0)}>12121</a> // 这种写法就可以避免

8、setState() 更新完数据 无法直接使用，因为异步，

this.setState(
  { 数据更新 },
  () => console.log('这是回调函数')
)

9、Fragment 的使用 类似 vue （template）

import React, { Component, Fragment } from "react";
Fragment 只是包裹一下，并不会渲染标签 dom

10、react 不允许直接操作 state里的数据，要先用一个变量去接收，在赋值！

会有严重的性能问题！不推荐

11、如何遍历 解析 html标签结构呢？类似vue的 v-html

dangerouslySetInnerHTML

有时候我们的数据结构可能是 渲染 一个 代码标签，但 往往 会当做字符串

dangerouslySetInnerHTML={ {__html: val.col }}

<li key={i} dangerouslySetInnerHTML={ {__html: val.col }}>   {/* {val.col} */}</li>






12、label for id 在 jsx 语法里 要使用 htmlfor (防止与 for循环冲突)

13、生命周期

// 渲染dom 挂载之前 即将废弃不推荐使用
componentWillMount() {
    
}
/* 
    是否需要 状态更新 这里必须要 返回 true 或 false 在render 渲染之前执行
    可以用来优化组件性能
*/
shouldComponentUpdate(nextProps, nextState, nextContext) {
  console.log(1, nextProps, nextState, nextContext)
  return true
}


// 父组件更新数据会触发 该组件的这个函数 16.9 版本已废弃，谨慎使用
componentWillReceiveProps(nextprops) {
  console.log(nextprops)
}

/*
    组件即将更新 在 shouldComponentUpdate 之后
*/
componentWillUpdate = (nextProps, nextState) => {
   console.log(2, nextProps,nextState) 
}
// 挂载渲染中 
render() {

}

// 组件已经更新完成
componentDidUpdate = (nextProps, nextState) => {
  console.log(3, nextProps, nextState)
 }
// 渲染完成之后 
// 推荐 请求数据 在这个生命周期里实现
componentDidMount() {
   
}

 // 组件的销毁 触发
componentWillUnmount = () => {
  console.log("销毁了") 
}

14、react 中使用第三方插件 js 引入 方法或 变量 要用 window.


用 window.$.trim

15、如何输入路径更加容易, 不再需要 ../../../../地狱模式在你项目的根目录下创建jsconfig.json文件，并添加以下代码

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

添加之前

添加完后就可以直接引用 

16、父组件传参 校验 以及 默认值设置

两种方式 静态属性和方法 static

import React, { Component } from 'react'import 
PropTypes from "prop-types";
export default class Demo extends Component {  
    constructor(props) {    
        super(props)    
        this.myRef = React.createRef();  
    }
    // 设置默认值
static defaultProps= {
    name: "你好"
}  
static propTypes = { 
    content: PropTypes.number, // 数字类型  
    content2: PropTypes.string, // 字符串类型  
    content3: PropTypes.array, // 数组类型  
    content4: PropTypes.bool, // 布尔值  
    content5: PropTypes.func,// 函数类型  
    content6: PropTypes.object, // 对象类型  
    content7: PropTypes.string.isRequired, 
    // 必传 必须要有参数且是 自己定义的类型这里 以string 来举例子  
}  
render() {    
    return (      
        <div ref={this.myRef}>      
            <input type="text"
             ref={ e => {this.input = e}   } 
            onChange={ this.change.bind(this) } />       
             111 { this.props.name }      
        </div>    )  
 }
}
// Demo.propTypes = {//   
    content: PropTypes.number, // 数字类型//   
    content2: PropTypes.string, // 字符串类型//   
    content3: PropTypes.array, // 数组类型//   
    content4: PropTypes.bool, // 布尔值//   
    content5: PropTypes.func,// 函数类型//   
    content6: PropTypes.object, // 对象类型//   
    content7: PropTypes.string.isRequired, 
    // 必传 必须要有参数且是 自己定义的类型这里 以string 来举例子 // 
    }
    // Demo.defaultProps = { 
        // 默认的值 如果父组件不传就用这个值，传了就用父组件的值//   
        name: "你好"// 
    }

17、Hooks的使用

1、Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

import React, { useState } from 'react'; function Example() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default Example

18、组合（类似vue的 slot 插槽）

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}
// this.props.children 展示的就是 组件内的结构// 定义名称
function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}
function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

<Contacts /> 和 <Chat /> 之类的 React 元素本质就是对象（object），所以你可以把它们当作 props，像其他数据一样传递。这种方法可能使你想起别的库中“槽”（slot）的概念，但在 React 中没有“槽”这一概念的限制，你可以将任何东西作为 props 进行传递。


avatar
文章
阅读
粉丝