React基础笔记1
官网：https://react.docschina.org/
一、认知React
概述
React 起源于 Facebook(脸书) 的内部项目，它是一个用于构建用户界面的 javascript 库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。
React用于构建用户界面的 JavaScript 库，它不是一个完整的MVC框架
特点
- 声明式
你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI
- 基于组件
组件时React最重要的内容，组件表示页面中的部分内容
- 应用场景
使用React可以开发Web应用(ReactJs)，使用React可以开发移动端(react-native)，可以开发VR应用(react 360)
二、react写法基础
1、react应用
react有很多依赖库，其中有两个使我们必须引入的react.js、react-dom.js
下载地址
react.js 是核心，提供创建元素，组件等功能
https://unpkg.com/react@16/umd/react.development.js
react-dom.js 提供DOM相关功能
https://unpkg.com/react-dom@16/umd/react-dom.development.js
写法 必要的三个步骤（依赖的引入顺序不能乱）
<body>
<div id="app"></div>
<script src="./utils/react.development.js"></script>
<script src="./utils/react-dom.development.js"></script>
<script>
//1、 获取插入节点
const app=document.getElementById('app')
// 2、创建虚拟dom
const el=React.createElement
const vnode=el(
'div',
null,
el('h1',{id:1000},'hello w'),
)
// 3、把dom放到自定位置上
ReactDOM.render(vnode,app)
</script>
</body>
2、jsx介绍与用法
- JSX 执行更快，因为它在编译为JavaScript代码后进行了优化
- 它是类型安全的，在编译过程中就能发现错误
- 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速
- jsx语法中一定要有一个顶级元素包裹，否则编译报错，程序不能运行
引入依赖：
https://unpkg.com/babel-standalone@6/babel.min.js
1)、引入相关依赖
<div id="app"></div>
<script src="./utils//babel.min.js"></script>
<script src="./utils/react.development.js"></script>
<script src="./utils/react-dom.development.js"></script>
2)、创建dom元素
const app = document.getElementById('app')
// 单行不需要（），多行需要
const vnode = (<div>
<dl>
<dt>asd</dt></dl>
</div>)
3)、表达式
1、必须有最外成包裹
2、注释放在{}内
3、参数用{}单括号
const num = 1
const vnodes = (
<div>
<h3>{num}</h3>
<div>{num > 10 ? 'a' : 'b'}</div>
</div>
)
4)、动态绑定
1、动态属性：直接写{}
2、jsx class改成className
3、jsx for改成htmlFor
4、style 写{{fontSize:'14px',color:'red'}}
5、解析html dangerouslySetInnerHTML={{__html:html}}
const title = '按钮'
const html = '<a herf="">ff</a>'
const vnode1 = (
<div className='jj'>
<button title={title}>{title}</button>
</div>
)
5)、数组
const users = ['11', '22', '33']
const vnode2 = (
<div>
{
// 方案1
}{
users.map((item, index) => {
return (<h3 key={index}>{item}</h3>)
})
}
{
// 方案2
}
{
users.map((item, index) => (
(<h3 key={index}>{item}</h3>)
))
}
</div> )
6)、插入
ReactDOM.render(vnode, app)
三、React脚手架
1、创建
npx create-react-app 项目名称
这些文件没啥用删掉他们
修改文件--至此初始化完成
2、组件
1）、函数组件
import React ,{Component}from 'react'
function App(){
return(
<div>普通</div>
)
}
const App=()=>{
return(
<div>
es6
</div>
)
}
export default App
2）、类组件
import React ,{Component}from 'react'
class App extends Component{
render(){
return(
<div>类写法</div>
)
}
}
export default App
3、事件处理
该表事件绑定指向
export default class Solvethis extends Component {
constructor(props) {
super(props)
// 方案1
this.fun = this.fun.bind(this)
}
render() {
return (
<div>
<button onClick={this.fun}>方案1</button>
<button onClick={this.fun2.bind(this)}>方案2</button>
<button onClick={() => this.fun()}>方案3</button>
<button onClick={this.fun}>方案4</button>
</div>
)
}
fun() {
console.log(this.props)
}
fun2() {
console.log(this.props)
}
fun3() {
console.log(this.props)
}
fun4 = () => {
console.log(this.props)
}
}
4、state状态
state状态只在class类组件才有，函数组件没有此功能。
export default class extends React.Component {
constructor(props){
super(props)
// 第一种初始化方式
this.state = {
count : 0
}
}
/*
// 第二种初始化方式
state = {
count:1
}
*/
render(){
return (
<div>计数器 :{this.state.count}</div>
)
}
}
修改
语法1
this.setState({
key:value
}) 语法2 官方推荐
this.setState(state => {
key:value
})
三、组件传值
1、props相关
props与state区别
- props 中存储的数据，都是外界传递到组件中的
- props 中的数据，都是只读的
- state 中的数据，都是可读可写的
- props 在函数声明或类申明的组件中都有
- state 只有类申明的组件中才有
1）、父子组件传值props
父组件
<Home name={'zhangzhang1'}></Home>
函数组件
const App=(props)=>{
return(
<div>
{props.name}
</div>
)
}
类组件
class App extends Component{
render(){
return(
<div>
<h3>
{this.props.name}
</h3>
</div>
)
}
}
2）、props之children属性
父组件
<Home >我是children中的值</Home>
接收
class App extends Component{
render(){
return(
<div>
<h3>
{this.props.children}
</h3>
</div>
)
}
}
3）、props-type限制传入类型
组件调用者可能不知道组件封装着需要什么样的数据，如果传入的数据不对，可能会导致程序异常，所以必须要对于props传入的数据类型进行校验。
下载:npm i -S prop-types
参数
- 类型： array、bool、func、number、object、string
- React元素类型： element
- 必填项： isRequired
- 特定结构的对象： shape({})
函数组件
import PrTypes from 'prop-types'
const Cmp = (props) => {
Cmp.defaultProps = { //默认值
name: '标题'
}
}
类组件
import PrTypes from 'prop-types'
class Cmp extends Component {
// 静态方法不能适用this
static propTypes = {
name: ProTypes.string
}
render() {
return (
<div>{this.props.name}</div>
)
}
}
4)、受控组件
将state与表单项中的value值绑定在一起，有state的值来控制表单元素的值，称为受控组件。
<input type="text" value={this.state.username} onChange={this.inputChange.bind(this)} />
//注：多表单元素需优化事件方法
this.setState({
[e.target.name]: e.target.value
})
5）、非受控组件
没有和state数据源进行关联的表单项，而是借助ref，使用元素DOM方式获取表单元素值
class App extends React.Component {
constructor(props){
super(props)
//创建 ref
this.username = React.createRef()
}
render(){
return (
<div>
<input type ="text" ref={this.username} />
<button onClick ={this.fn}>获取值</button>
</div>
)
}
// 获取文本框的值
fn =() => {
console.log(this.username.current.value)
}
}
6）、无修改不渲染
shouldComponentUpdate
import React, { Component, PureComponent } from 'react'
export default class SApp extends Component {
shouldComponentUpdate(nextProps, nextState) {
/*
旧得props
这时的props还没更新
state同理
PureComponent 与Component 功能相似的，区别在于React.PureComponent 内部自动实现了
shouldComponentUpdate钩子，不需要手动进行比较操作。
*/
if (nextProps.name == this.props.name) {
return false
}
return true
}
render() {
return (
<div>{this.props.name}</div>
)
}
}
PureComponent
React.PureComponent 与 React.Component 功能相似的，区别在于React.PureComponent 内部自动实现了 shouldComponentUpdate钩子，不需要手动进行比较操作。
import React, { Component, PureComponent } from 'react'
export default class SApp extends PureComponent {
render() {
return (
<div>{this.props.name}</div>
)
}
}
2、其他组件通信
1）、父组件--子组件
原理：通过ref非受控组件 ，利用createRef进行子元素方法来改变内容
子组件
import React,{Component} from 'react'
export default class Child extends Component{
state={
title:'sad'
}
render(){
return(
<div>
{this.state.title}
</div>
)
}
setTitle(){
this.setState((state)=>{
title:'999'
})
}
}
父组件
import React,{Component,createRef} from 'react'
import SonView from './components/SonListen'
export default class Father extends Component{
constructor(props){
super(props)
this.son=createRef()
}
render(){
return(
<div>
<SonView ref={this.son}></SonView>
<button onClick={this.func.bind(this)}></button>
</div>
)
}
func(){
const sonValue=this.son.current
sonValue.setTitle()
}
}
2）、子组件---父组件
父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过this.props接收到父组件的方法后调用。
<SonView sonClick={this.son}></SonView> 父组件
<button onClick={this.props.sonClick(id)}></button> 子组件
3）、跨组件通信
祖先--子孙
一、定义数据源
import React ,{creatContext} from 'react'
let {Provider,Consumer}=creatContext()
export{
Provider, //发布
Consumer //订阅
}
二、祖先
import React,{Component} from'react'
import {Provider,Consumer} from './store'
import Son1 from './Son1'
export default class App extends Component{
constructor(props){
super(props)
this.state={
name:'uuu'
}
}
render(){
return(
<div>
<Provider value={this.state.name}>
<Son1></Son1>
</Provider>
</div>
)
}
}
三、接收的后代
import React,{Component} from'react'
import {Consumer} from './store'
export default class Son1 extends Component{
constructor(props){
super(props)
this.state={
name:'uuu'
}
}
render(){
return(
<div>
<Consumer>
{
value=>{
<div>{value.name}</div>
}
}
</Consumer>
</div>
)
}
}
兄弟节点之前通信
原理：一个子物体挂在事件，另一个挂在属性，通过实践改变属性，来改变另一个组件接受的内容
祖先
render() {
let { count, setCount } = this.state
return (
<div>
<Provider value={{ count, setCount }}>
{/* 兄弟 */}
<Cmp1></Cmp1>
<Cmp2></Cmp2>
</Provider>
</div>
)
}
兄弟1
import React, { Component ，createContext} from 'react'
export default class Cmp2 extends Component {
// 只得到了默认数据 --> 没有包裹在Provider组件中
static contextType = createContext
render() {
return (
<div>
<button onClick={this.setCount.bind(this)}>自增数据</button>
</div>
)
}
setCount() {
this.context.setCount()
}
}
兄弟2
<Consumer>
{
value => <h3>{value.count}</h3>
}
</Consumer>
)
React基础笔记1的更多相关文章
- React基础笔记
参考文章: http://www.ruanyifeng.com/blog/2015/03/react.html https://segmentfault.com/a/1190000002767365 ...
- React 基础笔记
概览 React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript库.可以将一些简短.独立的代码片段组合成复杂的UI界面,这些片段被称为"组件". React 大 ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- React学习笔记（五）State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
- React routerV4 笔记
React routerV4 笔记 一.基础路由示例 import React from 'react' import { BrowserRouter as Router, Route, Li ...
- 【React】react学习笔记02-面向组件编程
react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件 a.轻量组件-函 ...
- 【React】react学习笔记01-概念与基本使用
俺为啥要学这玩意: 家里的杂事好不容易处理完了,开始正式静下心来学习~博主是做后端开发的,js基础不深,之前也是用React写过许多东西了,但是基本上都是用的CV大法,别人的组 件修修改改拿来 ...
- react基础（1）
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- Java基础笔记 – Annotation注解的介绍和使用 自定义注解
Java基础笔记 – Annotation注解的介绍和使用 自定义注解 本文由arthinking发表于5年前 | Java基础 | 评论数 7 | 被围观 25,969 views+ 1.Anno ...
- php代码审计基础笔记
出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...
随机推荐
- 强化学习性能指标之一：以训练的episodes数和训练所需样本数作为评价算法性能的指标
在强化学习领域,一般都是限定训练的episodes数和训练所需样本数的,也就是说在进行算法性能对比的时候各个算法都是在相同的训练的episodes数和训练所需样本数的,但是如果我们在算法得分数保持相同 ...
- Python计算1到100偶数的加和
sum_value = 0 for i in range(1,101): if i % 2 == 1: continue sum_value += i print(sum_value) print(s ...
- Qml 中的那些坑(七)---ComboBox嵌入Popup时，滚动内容超过其可见区域不会关闭ComboBox弹窗
[写在前面] 最近在写信息提交 ( 表单 ) 的窗口时发现一个奇怪的 BUG: 其代码如下: import QtQuick 2.15 import QtQuick.Controls 2.15 impo ...
- think in java interview-高级开发人员面试宝典(二)
从现在开始,以样题的方式一一列出各种面试题以及点评,考虑到我在前文中说的,对于一些大型的外资型公司,你将会面临全程英语面试,因此我在文章中也会出现许多全英语样题. 这些题目来自于各个真实的公司,公司名 ...
- Java中的对象池模式
Java中的对象池模式 Java对象的生命周期分析: Java对象的生命周期大致包括三个阶段: 对象的创建,对象的使用, 对象的清除. 因此,对象的生命周期长度可用如下的表达式表示: T = T1 + ...
- 软件逆向之OD
OD全称OllyDbg ,是一种具有可视化界面的 32 位汇编-分析调试器.和IDA不同之处在于可以动态调试软件功能,可以有效的去分析程序构成. 以下软件讲解均以吾爱破解中的OD进行讲解.软件下载 打 ...
- python之typing
typing介绍 Python是一门动态语言,很多时候我们可能不清楚函数参数类型或者返回值类型,很有可能导致一些类型没有指定方法,在写完代码一段时间后回过头看代码,很可能忘记了自己写的函数需要传什么参 ...
- golang操作ini文件包之go-ini
官网:ini.unknwon.io/docs github:https://github.com/go-ini/ini ini 是 Windows 上常用的配置文件格式.MySQL 的 Windows ...
- vagrant搭建开发环境
一:我们为什么需要用这玩意 我们在开发中经常会面临的问题:环境不一致,有人用Mac有人用Windos还有几个用linux的,而我们的服务器都是linux. 在我本地是可以的啊,我测了都,没有问题啊,然 ...
- manim边做边学--曲面
Surface类是Manim中专为创建和操控复杂的三维表面而打造的. 在实际应用中,无论是创建数学教学中的几何模型,还是模拟物理现象中的曲面变化,甚至是构建复杂的动画场景中的三维元素,Surface类 ...