React的基本内容

2020-02-23

React 简介

声明式 (只需要告诉框架需要做什么，而不需要告诉他该怎么做，跟声明式对立的是命令式，比如 Jquery)
组件化 (Vue 中声明全局组件的方式 Vue.component 组件名组件最大的好处是可以复用)
一次学习，随处编写 (React 可以写原生应用(ReactNative)和网页应用)

React 分为五个部分

Jsx 语法
Component 组件
路由
状态管理
第三方工具

React 和 Vue 的不同

Vue 是官方维护的，而 React 是社区维护的

React 开发环境搭建

引用文件的方式

基本使用

建立一个项目的目录
进入项目打开终端 npm init -y
会在目录中产生一个 package.json 文件
npm I react –save 或 yarn add react(有 yarn 的)
会在目录中产生项目依赖目录 node_modules
进入 node_modules react umd 找到 react.development.js
粘贴到项目目录下的 js 文件夹里
终端里 npm I react-dom –save 或 yarn add react-dom(有 yarn 的)
进入 node-modules react-dom umd 找到 react-dom.development.js
粘贴到项目目录下的 js 文件夹里
创建 html 文件
按顺序依次引入 react.development.js react-dom.development.js 文件

可以实现 hello word 的呈现
ReactDOM.render(“hello world”,document.getElementById(“box”))

此处只能渲染出来文本内容，渲染不出来带标签的内容，需要下载 babel 包
npm i babel-standalone 或 yarn add babel-standalone
进入 node_modules babel-standalone
复制 babel.js 粘贴到 js 文件夹里面
再在 html 里面接着引入

如果使用了 babel.js

那么用 script 标签的时候就要加入 type=text/babel

就可以实现标签的呈现
在 html 文件中的引入顺序
a react.development.js
b react-dom.development.js
c babel.js
注意这个问题
script 的 type 属性指定为 text/babel
babel
es6 转为 es5
解析 jsx
什么是 jsx
jsx 是一种语法糖
jsx 是 javascript 扩展的意思
相当于 js+xml
jsx 不是必须的，但是用 jsx 可以提高开发效率
jsx 的原理就是

1	React.creatElement(tag,{attrs},content)

react 的差值表达式是一对大括号即为引用变量的写法
jsx 注意事项
a 对象不能直接渲染,数组以字符串的形式进行渲染
b 在 jsx 中 class 要改为 className
c 事件的首字母要大写如 onClick 形式
d 写行内样式

1	style={{color:"red"}}

第一对大括号表示差值表达式，第二对大括号表示差值表达式的值是一个对象

遍历列表

react 当中遍历列表要指定 key 值，可以使用 map 方法进行映射(也有其他方式)
遍历列表的时候注意标签的语义化
return 后面要有字符
react 特点简洁灵活

组件

无状态组件

1
2
3

const 组件的名字=(props)=>{
  return jsx表达式
}

类组件

class 组件的名字 extends React.Component{
  render(){
    // this 常用的属性 state props refs
    // state 是组件内部的数据 props 来自组件外部的数据 refs 标识一个组件的节点
      return jsx表达式
  }
}

遍历对象

遍历对象的关键就是把对象变成数组

1	Object.keys(obj)

对象的浅拷贝，扩展运算符， Object.assign

1 2	var obj = {...obj2} var obj = Object.assign({},obj2)

jsx 中的注释

{/*内容*/}

refs

1
2
3

//this.refs.标识节点字符串
//<node ref={(标识节点的变量)=>this.自定义属性=表示节点的变量}>
//this.自定义属性 就可以找到节点了

state 状态

存值

constructor(props){
  super(props); // this.props有值
  this.state={
    key:value
  }
}

更改 state 的值
不能直接改直接改就会视图不同步
要改 state 用 setstate 更改

1
2
3

this.setState({
  //key: 新的value
})

setState 连续执行多次，对象会合并，
只执行最后那一个 setState 的内容，跟前面的内容没有关系
setState 是异步的操作，拿到最新的值要在回调函数里拿

计数器
需求 : 计算点击按钮的次数
类组件事件处理函数要绑定 this 或者用箭头函数
建议尽量在构造函数 constructor 里绑定 this，因为这样只执行一次绑定
事件绑定处理函数，要进行传参
this.方法名字.bind(this,参数)
事件处理函数的最后一个参数是事件对象
setState
a) 异步
b) 连续执行对象会合并

1
2
3

this.setState({
  key:value
},callback)

this.setState((prevState,props)=>{
  return {
    key:value
  }
},callback)

连续执行多次会放入队列中依次执行

组件挂载阶段，会自动执行的钩子函数
constructor
render
componentDidMount
受控组件与非受控组件
表单元素他的值来自于 state 这个组件就是受控组件，否则就是非受控组件
普通组件来说，它的数据都来自于外部 (props) 这个组件就是受控组件
类组件的三个属性
state refs props 这三个是常用的还有一个是 context 上下文

脚手架环境

基本使用

字符串 includes 方法判断是否含有子串(indexOf)
dagerouslySetInnerHTML
可以渲染 html 的字符串

1	<div dagerouslySetInnerHTML={{ __html: html的字符串 }}></div>

脚手架环境安装

create-react-app #全局安装
npm i create-react-app -g
create-react-app –version #查看版本号

能看到版本号就说明安装成功了

创建项目:
create-react-app 项目名字

src/index.js 就是入口文件

引入图片

1 2	import 变量 from '图片的路径' <img src={变量} />

或

1	<img src={require("图片的路径")} />>

这种方法用于引入多张图片的时候，一张一张导入太麻烦

导入导出
export xxx

import {xxx} from

一次导入所有的
import * as 名字 from

然后变量可取用
名字.变量名

语法规则

jsx 的规则
value 改为 defaultValue
checked 改为 defaultChecked
onXxx
for 改为 htmlFor
style 写对象
class className
{/注释/}
ref 的第三种使用方式 (a,字符串的方式 b.回调函数的方式)

createRef

this.state={
  变量:createRef()
}
<node ref={this.state.变量} />
引用这个节点
  this.state.变量.current 就可以引用这个节点了

组件的传值
父传子通过属性传递
子传父调用父组件传递过来的方法
mock 数据工具

1 2	npm i json-server -g json-server --version 可以看到版本号就代表安装成功

建立一个 json 文件

{
  "list":[
    {
      "id":1,
      "name":"zhangsan",
      "age":20
    },
    {
      "id":2,
      "name":"lisi",
      "age":25
    }
  ]
}

在这个文件处打开终端，执行下面的命令，
就能把这个文件在指定的端口运行起来
json-server xxx.json –port 端口号
json-server 模糊查找有两种形式
全局查找
url?q=查找的关键字
以某一个字段进行模糊查找，比如年龄包含 2 的
url?age_like=2

本文作者：人模人样的搬砖老段
本文链接：React 的基本内容
如有错误，请及时评论或者知乎私信或者 B 站私信哦~