React学习笔记（一）
危烨煜
一、React基本认识
- 1、官网：
- 2、介绍描述
- 1)用于构建用户界面的 JavaScript 库(只关注于View)
- 2)由Facebook开源
二、React的基本使用
- 1、相关的库
- 1)react.js: React的核心库
- 2)react-dom.js: 提供操作DOM的react扩展库
- 3)babel.min.js:解析JSX语法代码转为纯JS语法代码的库
- 2、在页面中使用
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
- 3、编码
<script type="text/babel"> //必须声明babel
// 创建虚拟DOM元素
const vDom = <h1>Hello React</h1> // 千万不要加引号
// 渲染虚拟DOM到页面真实DOM容器中
ReactDOM.render(vDom, document.getElementById('test'))
</script>
-
4、虚拟DOM
- 1)React提供了一些API来创建一种
特别的一般js对象- a.var element = React.createElement('h1', {id:'myTitle'},'hello')
- b.上面创建的就是一个简单的虚拟DOM对象
- 2)虚拟DOM对象最终都会被React转换为真实的DOM
- 3)我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
- 1)React提供了一些API来创建一种
-
5、JSX
- 1)全称: JavaScript XML
- 2)react定义的一种类似于XML的JS扩展语法: XML+JS
- 3)作用: 用来创建react虚拟DOM(元素)对象
- a.var ele =
Hello JSX!
- b.注意1: 它不是字符串, 也不是HTML/XML标签
- c.注意2: 它最终产生的就是一个JS对象
- a.var ele =
- 4)标签名任意: HTML标签或其它标签
- 5)标签属性任意: HTML标签属性或其它
- 6)基本语法规则
- a.遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- b.遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
- 7)babel.js的作用
- a.浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- b.只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
-
5、渲染虚拟DOM(元素)
- 1)语法: ReactDOM.render(virtualDOM, containerDOM)
- 2)作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
- 3)参数说明
- a.参数一: 纯js或jsx创建的虚拟dom对象
- b.参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
-
6、建虚拟DOM的2种方式
- 1)纯JS(一般不用)
//h1创建dom的标签名 id创建标签的属性 title标签内容 React.createElement('h1', {id:'myTitle'}, title)- 2)JSX:
<h1 id='myTitle'>{title}</h1>
二、模块与组件和模块化与组件化的理解
- 1、模块
- 1)理解: 向外提供特定功能的js程序, 一般就是一个js文件
- 2)为什么: js代码更多更复杂
- 3)作用: 复用js, 简化js的编写, 提高js运行效率
- 2、组件
- 1)理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
- 2)为什么: 一个界面的功能更复杂
- 3)作用: 复用编码, 简化项目编码, 提高运行效率
- 3、模块化
- 当应用的js都以模块来编写的,这个应用就是一个模块化的应用
- 4、组件化
- 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
- 5、自定义组件(Component) :
1)定义组件(2种方式)
/*方式1: 工厂函数组件(简单组件)*/
function MyComponent () {
return <h2>工厂函数组件(简单组件)</h2>
}
/*方式2: ES6类组件(复杂组件)*/
//MyComponent2 组件名
class MyComponent2 extends React.Component {
render () {
console.log(this) // MyComponent2的实例对象
return <h2>ES6类组件(复杂组件)</h2>
}
}
2)渲染组件标签
ReactDOM.render(<MyComponent />, document.getElementById('example1'))
- 6、注意
- 1)组件名必须首字母大写
- 2)虚拟DOM元素只能有一个根元素
- 3)虚拟DOM元素必须有结束标签
- 7、render()渲染组件标签的基本流程
- 1)React内部会创建组件实例对象
- 2)得到包含的虚拟DOM并解析为真实DOM
- 3)插入到指定的页面元素内部
三、组件三大属性
- 1、state属性
- 1)、理解
- a、state是组件对象最重要的属性, 值是对象(可以包含多个数据)
- b、组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
- 2)、编码操作
1)初始化状态: constructor (props) { super(props) this.state = { stateProp1 : value1, stateProp2 : value2 } } 2)读取某个状态值 this.state.statePropertyName 3)更新状态---->组件界面更新 this.setState({ stateProp1 : value1, stateProp2 : value2 }) - 1)、理解
- 2、props属性
- 1)、理解
- a、每个组件对象都会有props(properties的简写)属性
- b、2)组件标签的所有属性都保存在props中
- 2)、作用
- a、通过标签属性从组件外向组件内传递变化的数据
- b、注意: 组件内部不要修改props数据
- 3)、编码操作
1)内部读取某个属性值 this.props.propertyName 2)对props中的属性值进行类型限制和必要性限制 Person.propTypes = { name: React.PropTypes.string.isRequired, age: React.PropTypes.number.isRequired } 3)扩展属性: 将对象的所有属性通过props传递 <Person {...person}/> 4)默认属性值 Person.defaultProps = { name: 'Mary' } 5)组件类的构造函数 constructor (props) { super(props) console.log(props) // 查看所有属性 } 6)渲染传数据 const p2 ={ name:"Tom", } ReactDOM.render(<Person name={p2.name} age={20}/>,document.getElementById("test1")); - 1)、理解
- 3、refs属性
- 1)组件内的标签都可以定义ref属性来标识自己
- a.<input type="text" ref={input => this.msgInput = input}/>
- b.回调函数在组件初始化渲染完或卸载时自动调用
- 2)在组件中可以通过this.msgInput来得到对应的真实DOM元素
- 3)作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据
- 1)组件内的标签都可以定义ref属性来标识自己
四、事件处理
- 1、基本使用
- 1)通过onXxx属性指定组件的事件处理函数(注意大小写)
- a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
- b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
- 2)通过event.target得到发生事件的DOM元素对象
<input onFocus={this.handleClick}/> handleFocus(event) { event.target //返回input对象 } - 1)通过onXxx属性指定组件的事件处理函数(注意大小写)
- 2、强烈注意
- 1)组件内置的方法中的this为组件对象
- 2)在组件类中自定义的方法中this为null
- a.强制绑定this: 通过函数对象的bind()
- b.箭头函数(ES6模块化编码时才能使用)
五、收集表单数据
- 表单的组件分类
- a.受控组件: 表单项输入数据能自动收集成状态 onchange
- b.非受控组件: 需要时才手动读取表单输入框中的数据 ref
六、组件生命周期
- 理解
- 1)组件对象从创建到死亡它会经历特定的生命周期阶段
- 2)React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
- 3)我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作
- 生命周期详述
- 1)组件的三个生命周期状态:
- Mount：插入真实 DOM
- Update：被重新渲染
- Unmount：被移出真实 DOM
- 2)React 为每个状态都提供了勾子(hook)函数
- componentWillMount()
- componentDidMount()
- componentWillUpdate()
- componentDidUpdate()
- componentWillUnmount()
- 3)生命周期流程:
- a.第一次初始化渲染显示: + ReactDOM.render()
- constructor(): 创建对象初始化state
- componentWillMount() : 将要插入回调
- render() : 用于插入虚拟DOM回调
- componentDidMount() : 已经插入回调
- b.每次更新state: this.setSate()
- componentWillUpdate() : 将要更新回调
- render() : 更新(重新渲染)
- componentDidUpdate() : 已经更新回调
- c.移除组件: ReactDOM.unmountComponentAtNode(containerDom)
- componentWillUnmount() : 组件将要被移除回调
- a.第一次初始化渲染显示: + ReactDOM.render()
- 1)组件的三个生命周期状态:
- 重要的勾子
- 1)render(): 初始化渲染或更新渲染调用
- 2)componentDidMount(): 开启监听, 发送ajax请求
- 3)componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
- 4)componentWillReceiveProps(): 后面需要时讲
七、基于react脚手架
- react脚手架
- 1)xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
- a.包含了所有需要的配置
- b.指定好了所有的依赖
- c.可以直接安装/编译/运行一个简单效果
- 2)react提供了一个用于创建react项目的脚手架库: create-react-app
- 3)项目的整体技术架构为: react + webpack + es6 + eslint
- 4)使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
- 1)xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
- 创建项目并启动
- 全局安装react模板 npm install -g create-react-app
- 使用模板创建项目 create-react-app 加项目名
- cd 项目名 进入项目
- npm start 运行项目
- react脚手架项目结构
ReactNews
|--node_modules---第三方依赖模块文件夹
|--public
|-- index.html-----------------主页面
|--scripts
|-- build.js-------------------build打包引用配置
|-- start.js-------------------start运行引用配置
|--src------------源码文件夹
|--components-----------------react组件
|--index.js-------------------应用入口js
|--.gitignore------git版本管制忽略的配置
|--package.json----应用包配置文件
|--README.md-------应用描述说明的readme文件
八、react ajax请求
- 使用axios
- fetch
九、react-router
- react-router的理解
- 1)react的一个插件库
- 2)专门用来实现一个SPA应用
- 3)基于react的项目基本都会用到此库
- 路由的理解
- 1)什么是路由?
- a.一个路由就是一个映射关系(key:value)
- b.key为路由路径, value可能是function/component
- 2)路由分类
- a.后台路由: node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据
- b.前台路由: 浏览器端路由, value是component, 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件
- 3)后台路由
- a.注册路由: router.get(path, function(req, res))
- b.当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
- 4)前端路由
- a.注册路由: <Route path="/about" component={About}>
- b.当浏览器的hash变为#about时, 当前路由组件就会变为About组件
- 1)什么是路由?
- react-router相关API
- 组件
- 1)<BrowserRouter>
- 2)<HashRouter> 哈希路由
- 3)<Route> 路由
- 4)<Redirect> 路由重定向
- 5)<Link> 路由跳转
- 6)<NavLink> 导航路由
- 7)<Switch> 路由切换
- 其它
- 1)history对象
- a.History.createBrowserHistory(): 得到封装window.history的管理对象
- b.History.createHashHistory(): 得到封装window.location.hash的管理对象
- c.history.push(): 添加一个新的历史记录
- d.history.replace(): 用一个新的历史记录替换当前的记录
- e.history.goBack(): 回退到上一个历史记录
- f.history.goForword(): 前进到下一个历史记录
- g.history.listen(function(location){}): 监视历史记录的变化
- 2)match对象
- 3)withRouter函数
- 1)history对象
- 组件
- 路由使用
- 1）下载react-router: npm install --save react-router@4
- 2）可切换的路由组件
<Switch> <Route path='/about' component={About} /> <Route path='/home' component={Home} /> <Redirect to='/about' /> </Switch>- 3）main.js中使用
import {BrowserRouter, HashRouter} from 'react-router-dom' ReactDOM.render( ( <BrowserRouter> <App /> </BrowserRouter> /*<HashRouter> <App /> </HashRouter>*/ ), document.getElementById('root') ) - 向路由组件传递参数数据
//传参 <Route path={`${path}/:id`} component={MessageDetail}></Route> </div> <Link to={`${path}/${m.id}`}>{m.title}</Link> //路由跳转以及传参 this.props.history.push(`/home/message/${id}`) //接受参数 const path = this.props.match.path
十、react-ui
- 最流行的开源React UI组件库
- material-ui(国外)
- ant-design(国内蚂蚁金服)
类似资料：