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 --------------------------- ...
随机推荐
- JS 转盘抽奖效果
阅读原文,微信扫描二维码, 手机关注公共号酒酒酒酒,搜索 JS 转盘抽奖效果 效果图 前置条件: 开发环境:windows 开发框架:js 编辑器:HbuilderX 正文开始 <!DOCTYP ...
- 工作中的技术总结_ form表单的前后台交互 _20210825
工作中的技术总结_ form表单的前后台交互 _20210825 在项目经常会使用 form 表单 进行数据的 页面展示 以及数据的 提交和后台处理 1.数据是怎么从后台传递到前台的 model.ad ...
- 如果让你处理hbase 怎么保证数据的安全性可靠性 不需要具体的设置 要一套方案
有关数据安全及可靠我们认为大体上分为存储安全和使用安全 1 数据存储安全 hbase是基于hdfs的一种数据存储解决方案,所以有关数据的安全性可靠性可以利用hdfs自身的副本机制保障.另外原生的hba ...
- Python函数指定参数、返回值类型
def fun(arg1: str, arg2: int ...) -> str: def as_view(name: str, *class_args: int, **class_kwargs ...
- g++ error unrecognized command-line option ‘-std=c++23’; did you mean ‘-std=c++03’?
编译一个C++的项目代码,报错: g++: error: unrecognized command-line option '-std=c++23'; did you mean '-std=c++03 ...
- 【转载】碰碰彭碰彭Jingxuan —— 带中国古筝走上戛纳红毯
视频地址: https://www.youtube.com/shorts/gl796527H1I
- win10子系统docker搭建gitlab Server
心血来潮想搞一套cicd玩玩,结果开始就掉坑里了. 遇到问题 不会写文,所以语言组织比较差,将就看着吧!就当记录一下这个坑以后没准还能用的上. 参照https://blog.csdn.net/Mono ...
- 云开发实践：从 0 到 1 带你玩 AI
今天我们将深入分析云开发的 AI 能力.这次的讨论焦点不再是之前提到的云端IDE编写代码的能力,而是更为广泛和实际的内容--如何利用云平台提供的各种模块化能力,快速高效地开发.今天的主题依然围绕AI展 ...
- 我是如何从0开始，在23天里完成一款Android游戏开发的 – Part 1 – 开篇与前2天
本文由 ImportNew - ImportNew读者 翻译自 bigosaur.如需转载本文,请先参见文章末尾处的转载要求. 本文是这个系列的第一篇文章,记录作者的开篇和前2天的情况.文章由 朱新亮 ...
- golang之媒体处理
[视频] 获取视频封面图: 1) 如果是使用oss的话, 可以添加指定的后缀生成指定图片 视频截帧: https://help.aliyun.com/zh/oss/user-guide/video-s ...