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 --------------------------- ...
随机推荐
- NOIP2015 提高组 子串
NOIP2015 提高组 子串 感觉是最长公共子序列模型的变式. 容易想到记 \(f[i][j][k]\) 表示 \(A\) 走到了第 \(i\) 位,\(B\) 匹配上了 \(1 \sim j\), ...
- 适合才最美：Shiro安全框架使用心得
大家好,我是 V 哥.Apache Shiro 是一个强大且灵活的 Java 安全框架,专注于提供认证.授权.会话管理和加密功能.它常用于保护 Java 应用的访问控制,特别是在 Web 应用中.相比 ...
- Postman接口测试应用
接口测试可以通过工具(postman/jmeter).自动化测试(python+requests+开源框架)两种方式进行测试 接口测试可以在单元测试之后开始进行,不用关注前端页面有没有形成,也可以渗透 ...
- TIKZ——LaTeX基本绘图
TIKZ是LaTeX的一个绘图包,可以绘制其他软件很难画出来的图像. 基本用法 直线.垂足.矩形.椭圆 代码: \documentclass{article} \usepackage{tikz} \u ...
- Understanding ANTLR Grammar Files
Are you confused by all the different sections of an Antlr grammar file, wondering what each one doe ...
- 根据多选下拉框选中的结果，循环输出选中的标签<el-cascader>；对象数组由二维变成一维
下面的图是要实现的交互图,根据<el-cascader>中v-model绑定的数据,再去下拉框出书数据中进行比对输出 v-model绑定的数据是一个二维数组,是这样的一组数据 [[1,12 ...
- Windows 禁用笔记本键盘
背景 笔记本键盘+机械键盘组合如下图: 由此产生一个问题: 笔记本键盘现在的用处是什么? 没什么用,那我们何不把桌面的位置利用起来? 这样怎么样? ===> 为了防止放东西时候误触,我们需要把笔 ...
- 切换浏览器tab刷新实现
标签: js 缘起 最近在做一个活动需求,需求交互有跨项目,跳转到另一个项目里完成指定任务,再回来领取相应任务奖励,产品十分反感要求用户主动刷新浏览器才更新活动页的任务信息. 解决方案 方案1:如果项 ...
- 小程序：支付的时候缺少参数：total_fee，支付失败
最开始的参数是这样写的 param: { "nonce_str": "", "package": "606eb3de10e0602 ...
- csrf跨站请求伪造与校验策略
目录 一.csrf跨站请求伪造 概念引入 概念讲解 二.csrf校验策略 概念讲解 form表单操作csrf策略 ajax请求csrf策略 三.csrf相关装饰器 一.csrf跨站请求伪造 概念引入 ...