关于React总结

最新推荐文章于 2022-09-20 11:32:19 发布
最新推荐文章于 2022-09-20 11:32:19 发布
阅读量210 收藏
点赞数 1
分类专栏： web前端 react 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wendymwz/article/details/103863148
版权

在这里插入图片描述

一 ：React 介绍

1.1：什么是react

react是用来构建用户界面的JavaScript库，vc很多人认为是react是MVC中的v（视图）。

1.2：React 的特点
  1. 高效
  2. 灵活
  3. Jsx
  4. 单项数据流
  5. 声明范式编写方式
  6. 组件化开发
1.3：React 的优点
  1. 它提高了应用的性能 可以方便地在客户端和服务器端使用 由于 JSX，代码的可读性很好 React很容易与 Meteor，Angular 等其他框架集成 使用React，编写UI测试用例变得非常容易。
  2. React组件化开发，使用ES6的语法来自定义复杂的标签（组件），很多实现某些功能的自定义组装在一起，就可以完成更复杂的UI界面

二：es6

2.1：let新特性

不存在变量提升
暂时性死区
不允许重复声明
块级作用域

2.2：const新特性

不存在变量提升
暂时性死区
不允许重复声明
块级作用域
声明的变量不允许重新赋值
声明必须有初始化值

2.2：let与const区别

Let: 不存在变量提升
不允许重复声明
块级作用域

三：组件的介绍

3.1：什么是组件

一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)
把这些局部功能组装到一起，就形成组件

3.2：组件的类型

组件分为有状态组件和无状态组件 无状态组件就是函数组件 有状态组件是类组件 区别在于是否含有state属性 下面给大家详细介绍一下有状态组件

3.2.1：有状态组件（class组件）
//先引入react
import React, { Component } from 'react'
//声明一个类组件
export class Footer extends Component {
//重新渲染到页面
    render() {
    //返回值
        return (
            <div>
                
            </div>
        )
    }
}//class组件默认有state属性
//抛出
export default Footer

  • 在类组件中 声明变量时，要把所有的变量都放到state对象中

  • 放在state对象中 一是为了方便规范 ，二是标识符的规范 三是使用setstate实时更新数据

  • 类组件中声明的函数 this指向问题 可以用箭头函数解决 也可以用bind（this）

  • 操作渲染的DOM元素，使用ref属性 用this.refs.属性名 来获取值

3.2.2：无状态组件（函数组件）
//先引入react
import React, { Component } from 'react'
//声明一个函数组件
function  Footer(){
    render() {
    //返回值
        return (
            <div>
                
            </div>
        )
    }
}
//抛出
export default Footer;
3.3：组件之间的关系
  • 父子组件
  • 兄弟组件
3.4：组件之间的通信 传值
3.4.1 父传子

父组件 --> 子组件 props属性
F.js 调用了 S.js , S.js中的数据是由 F.js决定的 通过标签（组件）的属性传值
F.js 引入 S.js
class F{
<S 属性=值>
}
S.js {this.props.属性}

 父组件代码示例如下：

//父组件里面写的函数
// 类组件
// 先引入模块
import React from 'react';
import User from './User';
// 声明类
class Person extends React.Component{
// 重写渲染方法
render(){


return(
    <div className='div'>
        <div>hello  person</div>

<User str='1'></User>

    </div>
);
};
};
// 向外暴露
export default Person;

 子组件代码示例如下：

// 创建一个函数组件
// 首先引用react模块
import React from 'react';

// 声明函数
function User(props){
    return(
    <div><font>hello user</font>
   <p>
   {props.str}</p>
    </div>

)
}
export default User;
3.4.2 子传父

子组件 --> 父组件
1、在父组件中声明一个函数，用于接收子组件的传值
2、通过组件属性的方法，把函数传递给子组件
3、在子组件中通过props属性调用父组件的函数，并通过参数传值
4、在父组件中的函数通过形参接收子组件的传值

 父组件代码示例如下：

// 引用模块
import React from 'react';
import Son from './Son';
// 类函数 
class Father extends React.Component{
// 写一个构造方法
message(msg){
console.log(msg)
}
// 重写渲染方法
render(){

    return(
        <React.Fragment>
<Son mess='hello ' msg={this.message}></Son>
        </React.Fragment>
    )
}



}
export default Father;

 子组件代码示例如下：

import React from  'react';

class Son extends React.Component{
// 重新渲染页面
render(){
//返回值
return(
<React.Fragment>
<p>
{this.props.mess} ,
//传给父组件的值
{this.props.msg(123)}
</p>

</React.Fragment>

)

};



}
// 向外暴露
export default Son;
3.4.3. 兄弟传值

1、在父组件中声明一个函数，用于接收子组件的传值
2、通过组件属性的方法，把函数传递给子组件
3、在子组件中通过props属性调用父组件的函数，并通过参数传值
4、在父组件中的函数通过形参接收子组件的传值
5. 父组件再传给另一个儿子 通过构造方法 this.state接收 再用父传子的方法就可以了

 父组件代码示例如下：


import React from 'react';
import Son from './Son';
import Son2 from './Son2';

//父组件
class Father extends React.Component{

    constructor(){
        super();
        this.state = {
            message:''
        }
    }

    //用于接收Son.js组件的数据函数
    sonDatas(msg){
        this.setState({
            message:msg
        });
        console.log("在Father.js中展示Son.js生成的数据："+msg);
    }

    render(){
        return (
            <React.Fragment>
             
               <h1>在Father组件中显示：</h1>
               <Son sondata={this.sonDatas.bind(this)}></Son>
               <Son2 mess={this.state.message}></Son2>
            </React.Fragment>
        );
    }

}

export default Father;

 子组件1代码示例如下：


import React from 'react';

//子组件
class Son extends React.Component{

    //按钮点击事件函数
    sonClick(){
        this.props.sondata('这是从Son.js中生成的数据。。。');
    }

    render(){
        return (
            <React.Fragment>
            
                <button onClick={this.sonClick.bind(this)}>Son组件中的按钮获取数据</button>
                    
            </React.Fragment>
        );
    }

}

export default Son;

 子组件2代码示例如下：


import React from 'react';

//子组件
class Son2 extends React.Component{

    render(){
        return (
            <React.Fragment>
            
                <h1>
                    在Son2.js中展示Son.js中生成的数据，这个是Father.js传过来的，数据是：
                    {this.props.mess}
                </h1>

            </React.Fragment>
        );
    }

}

export default Son2;

四 refs属性介绍

在React数据流中，父子组件唯一的交流方式是通过props属性；如果要修改子组件，通过修改父组件的属性，更新达到子组件props属性的值，重新渲染组件以达到视图的更新。但是，有些场景需要获取某一个真实的DOM元素来交互，比如文本框的聚焦、触发强制动画等

  • 给DOM元素添加ref属性
  • 给类组件添加ref属性

 子组件2代码示例如下：

import React from 'react';
import ReactDOM from 'react-dom';

class Person extends React.Component{

    constructor(){
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    //点击事件
    handleClick(){
        // 使用原生的 DOM API 获取焦点
        this.refs.myInput.focus();
    }

    render(){
        return (
            <div>
                <input type="text" ref="myInput" />
                <input
                    type="button"
                    value="点我输入框获取焦点"
                    onClick={this.handleClick}/>
            </div>
        );    
    }
}

ReactDOM.render(<Person />, document.getElementById('root'));

五 ：路由之间的跳转

5.1 安装react-router-dom

*要注意：以下所有操作均运行在搭好的React环境中

cnpm install react-router-dom -S
5.2 引入路由相关组件

引入内置组件

  • HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
  • Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
  • Link表示一个路由的链接

代码示例如下:

import {HashRouter,Route,Link} from 'react-router-dom'
5.3嵌套路由
5.3.1 入口文件 代码示例：
import React from 'react';
//先引入要用到的路由 链接
import {HashRouter,Route,Link} from 'react-router-dom';
import News from './News'
//声明一个类组件
class App extends React.Component{
//从新渲染页面
render(){
return(
// 根容器
<HashRouter>
<div>

  <h2>我想吃肉</h2>
<hr />
{/* 链接 */}

<Link to='/News'>新闻</Link>&nbsp;&nbsp;
<Route path='/News' component={News}></Route>

</div>
</HashRouter>
)}

}
//向外暴露
export default App;
5.3.2 一级路由 代码示例：
//引入要用到的路由 链接
import React from 'react';
import Pig from './news/pig'
import {Route,Link} from 'react-router-dom';
//声明一个类组件
class News extends React.Component
{
//重新渲染页面
render(){

return(


<div>
//link里面的to指的是去某个页面 
<Link to='/news/pig'>你怕是个憨憨</Link>
//在这里的陆晶晶跳转的是news里面的pig组件  
<Route path='/news/pig' component={Pig}></Route>

</div>
)
}
}
//向外暴露
export default News;
5.3.3 二级路由 代码示例：

跳转到这个路由中
代码示例如下：

import React from 'react';
//声明一个类组件
class pig extends React.Component{
//重新渲染页面
render(){

return(
<div>哈哈哈哈哈</div>
)
}
}
//向外暴露
export default pig;

六 redux介绍

6.1什么是redux

Redux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux框架，Flux是Facebook开发的一个框架。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动

6.2：配置Redux
 npm install redux

创建store目录，在store目录下新建index.js文件，键入以下内容：

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

在store目录下创建reducer.js文件，键入以下内容：

const defaultState = {
    inputValue:'',
    list:[]
}

//reducer可以接收state，但是不能修改state
export default (state = defaultState,action) => {
    return state;
}

在组件中就可以使用store的数据

import React,{Component} from 'react';
import store from './store/index';

class TodoList extends Component{

    constructor(props){
        super(props);
        this.state = store.getState();
        this.handleStoreChange = this.handleStoreChange.bind(this);
        store.subscribe(this.handleStoreChange);
    }
    
    handleStoreChange(){
        this.setState(store.getState());
    }

    render(){
        return (
            <div>
                <input type='text' value={this.state.inputValue}/>
                <button onClick={this.handleClick}>提交</button>
                <ul>
                    {this.state.list.map((item,index)=>{
                        return (
                            <li key={index}>{item}</li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}

export default TodoList;

*结束了。。。看完了这些 你是否对react有了新的认识 加油哦

依古比古*
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React总结.xmind
10-14
React总结.xmind
react 定义组件变量
madehaiyoushei的博客
10-17 1万+
react定义变量： constructor(){ super(); this.state={ timer:0 } } 方法：    functionA(){              console.log("this is functionA!"); } 引用 onClick={this.functionA.bind...
react函数组件
z599558315的博客
11-30 1432
react 创建组件有三种方式 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的extends React.Component定义的组件 这篇我们主要讲函数组件的使用， 在函数组件里面是没有生命周期管理和状态管理，但是有类似生命周期的一些方法在官网上叫做Hook Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 ...
react 如何定义变量并使用
weixin_43609391的博客
03-18 7583
这里面涉及到了 1、变量如何定义 2、变量如何进行改变 3、方法如何调用 都写有详细的注释大家可详细观看适合刚学习react的新同学 class Packaging extends React.Component{ // react 类组件 constructor(props) { super(props); this.state = { // 进行变量定义（会vue的同学：这个地方就相当于 data 的return里所定义的）
React（3）变量使用、变量更新、父子组件变量传递
qq20004604的博客
02-09 1万+
5、变量 被中括号包含。 let foo = 'world' class HelloWord extends React.Component { render() { return &lt;div className={domClass}&gt; Hello，{foo} &lt;/div&gt; } } 6、组件...
React中有状态（state）与无状态组件以及this的指向问题
PILIpilipala的博客
12-19 579
有状态和无状态组件 函数组件叫做无状态组件；类组件叫做有状态组件 状态 （state），组件中使用的数据都保存在 state 中，并且是组件的私有数据 函数组件只负责数据展示（静） 类组件有状态，负责动态展示 UI 界面 （动） state的基本使用 state用来为组件绑定私有数据，有两种绑定形式 第一种： 在构造函数中定义 state 第二种： 在类中直接定义state （推荐） 在构造函数中定义 state class Hero extends React.Component { // 使用构
React框架总结.pdf
04-03
后续在 React 过程中大量用到面向对象编程思想 重点讲解 ES6 的面向对象 类的概念 ES6 提出的 class 类的概念。在 ES5 中 function 构造函数来实现面向对象 类是对象的抽象，对象是类的具有表现 编写类的时候，...
react 总结.md
07-14
react 总结.md
reactNative学习总结
03-29
精心准备与总结，学习reactnative的文档，看一遍就可以上手开发。
react及react生态知识总结
10-18
对react，react全家桶，react native等的知识点进行汇总
react 组件里的作用域问题
fortunegrant的博客
10-09 1720
https://blog.csdn.net/huanghanqian/article/details/80548100
React学习（二）——组件的运用和数据传递
热门推荐
daxiazouyizou的博客
03-29 1万+
    大家好，我是凯文，本篇文章主要围绕React框架的组件以及组件之间数据的传递展开，并通过实例来实现特定的功能。下面先来简单介绍一下React的组件，由本人学习实践所得，用于做笔记，仅供参考。     React框架的一大特色就是它通过组件化的方式来构建和渲染前端页面，了解过React基础知识的小伙伴应该知道，React框架采取的是虚拟的DOM，也就是说，在呈现实际的Web页面之前，首先编排...
react中组件、变量常量、方法的导入导出总结即export 与 export defualt的区别
m0_37148591的博客
11-16 1万+
@[总结react中组件、变量常量、方法的导入导出) 组件 导出 export default class Component extends Component{ render(){ return (&amp;amp;amp;amp;lt;div&amp;amp;amp;amp;gt;Hello, World.&amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;gt;) }} } 导入 import Compo
react 子组件获取变量属性值
weixin_30384217的博客
05-07 754
刚刚遇到一个问题：子组件属性值绑定了变量，但是在子组件的componentDidMoiunt中拿到的值始终是undefinded。如下： 1 <PieInfo 2 title='有效病案' 3 num={yxba} 4 ...
react组件中全局变量如何设置
weixin_45538554的博客
06-24 5926
import React from 'react' //此变量写在声明组件之前，不为组件内部的变量，即使组件销毁，该变量依然存在！ //类似java中的static修饰的静态变量 let num = 0 export default class A extends React.PureComponent { componentDidMount() { console.log(temp) } render() { return ( <div>A</d
React 中的变量存储
糖衣
09-14 6911
  在React中，我们可以将数据保存在 props、state、store 或者 this 中，但是为了更好的管理数据，我们应该正确的存储数据。 本文大部分为翻译自Where to Hold React Component Data: state, store, static, and this 1、props   我们先从最简单的没有争议的 props 说起。   在 React 中 ...
React介绍
weixin_48294709的博客
05-29 1015
react起源于Facebook的内部项目，在13年5月开源。react不是一个完整的MVC框架，最多可以认为是MVC中的V（view），react并不认可MVC开发模式。可以理解为，react将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了页面。 react特性 声明式设计 虚拟dom，最大程度减少直接与dom的交互 JSX 是js的扩展 组件化 使得代码更容易复用 单向响应式的数据流 虚拟dom ......
React简介
萧篱衣的博客
09-20 1440
React是一个将数据渲染为HTML视图的开源JavaScript库
react builder
最新发布
03-11
React Builder是一个用于构建React应用程序的工具。它提供了一个可视化的界面，使开发人员...总结一下，React Builder是一个可视化的工具，用于简化React应用程序的开发过程，提高开发效率，并且降低了对编码的依赖。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值