react基础

最新推荐文章于 2021-04-17 14:25:49 发布

正义的小豆

最新推荐文章于 2021-04-17 14:25:49 发布

阅读量136

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/ywy502/article/details/104293105

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

react脚手架

全局安装create-react-app工具:npm install create-react-app -g;
创建你的项目:create-react-app [项目名]
• npm start: 在开发模式下启动app，默认使用使用3000端口，启动后在浏览器中输入http://localhost:3000就能访问，如果应用发生了更改页面会自动刷新
• npm test: 运行应用的测试脚本
• npm run build: 为生产环境编译并且打包应用程序，打包到build文件夹中
• npm run eject: 如果你稍有心的观察CRA的目录里的文件，你会发现没有.babel文件，没有webpack.config.js类似文件。因为所有的这些琐碎的配置脚手架都帮你搞定了。全部都在react-scripts类库中。所以你看到package.json文件里npm start实际运行的是react-scripts start。当你不满足于脚手架为了你预设的配置时，你就可以使用eject命令将配置暴露出来（比如start命令，还有webpack.config.dev.js），这样你就可以完全自定义这些配置。注意这个操作是不可逆的。当你运行完毕之后你会发现package.json里的scripts的start命令变为node scripts/start.js
•

React高效的原因

虚拟(virtual)DOM, 不总是直接操作DOM
DOM Diff算法参考https://zhuanlan.zhihu.com/p/20346379?refer=purerender
, 最小化页面重绘

JSX

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: XML+JS
作用: 用来创建react虚拟DOM(元素)对象
a. var ele =
Hello JSX!

b. 注意1: 它不是字符串, 也不是HTML/XML标签
c. 注意2: 它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
a. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
b. 遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
babel.js的作用
a. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
b. 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

渲染虚拟DOM(元素)

语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
a. 参数一: 纯js或jsx创建的虚拟dom对象
b. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

自定义组件(Component) :

定义组件(2种方式)

/*方式1: 工厂函数组件(简单组件)*/
function MyComponent () {

return <h2>工厂函数组件(简单组件)</h2>

}

/*方式2:  ES6类组件(复杂组件)*/
class MyComponent2 extends React.Component {

constructor(props) {
      super(props);
  }
render () {

  console.log(this) // MyComponent2的实例对象

  return <h2>ES6类组件(复杂组件)</h2>

}

}

渲染组件标签

ReactDOM.render(<MyComponent />, document.getElementById('example1'))

注意

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

组件三大属性

1: state

更新状态---->组件界面更新

  this.setState({
    stateProp1 : value1,
    stateProp2 : value2
  })

props

对props中的属性值进行类型限制和必要性限制

Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}

默认属性值

Person.defaultProps = {
name: 'Mary'
}

Refs

组件内的标签都可以定义ref属性来标识自己
a. <input type=“text” ref={input => this.msgInput = input}/>（参数input为input元素对象）
b. 回调函数在组件初始化渲染完或卸载时自动调用
在组件中可以通过this.msgInput来得到对应的真实DOM元素
作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据

事件处理

通过onXxx属性指定组件的事件处理函数(注意大小写)
a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象

<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target  //返回input对象
}

收集表单数据

问题: 在react应用中, 如何收集表单输入数据
包含表单的组件分类
a. 受控组件: 表单项输入数据能自动收集成状态 onchange
b. 非受控组件: 需要时才手动读取表单输入框中的数据 onsubmit

原生onchange失去焦点时触发，react中onchange只要改变内容就触发

强烈注意

组件内置的方法中的this为组件对象
在组件类中自定义的方法中this为null
a. 强制绑定this: 通过函数对象的bind()
b. 箭头函数(ES6模块化编码时才能使用)

组件生命周期

理解

组件对象从创建到死亡它会经历特定的生命周期阶段
React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

生命周期流程图

在这里插入图片描述

生命周期详述

组件的三个生命周期状态:
- Mount：插入真实 DOM
- Update：被重新渲染
- Unmount：被移出真实 DOM
React 为每个状态都提供了勾子(hook)函数
- componentWillMount()
- componentDidMount()
- componentWillUpdate()
- componentDidUpdate()
- componentWillUnmount()
生命周期流程:
a. 第一次初始化渲染显示: ReactDOM.render()
- constructor(): 创建对象初始化state
- componentWillMount() : 将要插入回调
- render() : 用于插入虚拟DOM回调
- componentDidMount() : 已经插入回调
  b. 每次更新state: this.setSate()
- componentWillUpdate() : 将要更新回调
- render() : 更新(重新渲染)
- componentDidUpdate() : 已经更新回调
  c. 移除组件: ReactDOM.unmountComponentAtNode(containerDom)
- componentWillUnmount() : 组件将要被移除回调

2.7.5. 重要的勾子

render(): 初始化渲染或更新渲染调用
componentDidMount(): 开启监听, 发送ajax请求
componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
componentWillReceiveProps(): 后面需要时讲

常用的ajax请求库

jQuery: 比较重, 如果需要另外引入不建议使用
axios: 轻量级, 建议使用
a. 封装XmlHttpRequest对象的ajax
b. promise风格
c. 可以用在浏览器端和node服务器端
fetch: 原生函数, 但老版本浏览器不支持
a. 不再使用XmlHttpRequest对象提交ajax请求
b. 为了兼容低版本的浏览器, 可以引入兼容库fetch.js
axios
文档
https://github.com/axios/axios
相关API
GET请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

Fetch
文档

https://github.github.io/fetch/
https://segmentfault.com/a/1190000003810652
. 相关API
GET请求

fetch(url).then(function(response) {
  return response.json()
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
});

POST请求

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
})

正义的小豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react基础

react脚手架全局安装create-react-app工具:npm install create-react-app -g;创建你的项目:create-react-app [项目名]• npm start: 在开发模式下启动app，默认使用使用3000端口，启动后在浏览器中输入http://localhost:3000就能访问，如果应用发生了更改页面会自动刷新• npm test: 运行...
复制链接

扫一扫