React基础整理

最新推荐文章于 2022-07-26 16:03:36 发布

CrystalAngelLee

最新推荐文章于 2022-07-26 16:03:36 发布

阅读量179

点赞数

分类专栏： React 文章标签：前端 React

本文链接：https://blog.csdn.net/baidu_33591715/article/details/80938790

版权

React 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言：

休了两个月的假期，手头上的知识有点遗漏很多了，赶着在入职前复习一轮，正好把之前的东西做一个完整的归纳。【PS：所有的笔记都可能在日后做更新补充】

=============================================================================================

一、搭建一个React环境基础【由于是在一台新的电脑上搭建全新的环境，所以所有的安装都走一遍】：

(1) 电脑上有Node环境【下载安装环境：https://nodejs.org/en/】

(2)安装相应的编译器（个人用VsCode，可根据个人喜好进行不同编译器下载配置）【下载地址：https://code.visualstudio.com/download】

(3)cmd切换到工作文档目录（有Git控制软件可直接在文档目录下右击进入）

(4)命令行方法建立环境：

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

在浏览器中出现REACT的图表及HelloWorld则说明环境搭建成功

注意：VsCode是有终端集成环境的可以用VS打开相应的目录环境后点击到终端进行相应第四步的操作，本质相同。

二、复习一下React的基础知识吧：

1. React的核心概念有：①Component②JSX③ref④props⑤state

2.基础知识：

（1）方法-- ReactDOM.render(要渲染的元素，渲染指定的容器)

举例： ReactDOM.render(<h1>Hello React</h1>,document.getElementById('example'))

（2）babel--babel是js编译器，将es6\jsx等转换为浏览器能识别的语法

转换之前:ReactDOM.render(<h1>Hello React</h1>,document.getElementById('example'))

转换之后： ReactDOM.render(

React.createElement('h1',null,"Hello React"),

document.getElementById('example')

)

(3)jsx(javaScriptXML)

什么是jsx？ jsx并不是一种新的语法，只不过是允许在js中编写标签！

JSX中的语法：

①如果遇到<,首字母小写就会使用html来解析，首字母是大写，让React按照组件来解析

②如果遇到{，就会使用js来解析

注意事项：

1.react中，是不允许直接返回多个标签，可以放在一个顶层标签中！

2.{/* 这是一个注释 */}

GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_01.html&Demo_02.html为基础练习

3. Component 组件【组件是一个可被反复使用的，带有特定功能的视图】

（1）React中组件的创建和使用

创建：

var Hello = React.createClass({

render:function(){

return 渲染的模板内容

}

})

使用：

<Hello></Hello>

注意事项：

①组件类的名称要符合全驼峰命名方式(首字母全大写)

②在render方法中返回要渲染的元素时，不允许直接换行

③不允许在组件类中直接渲染多个元素，但是可以放在一个容器中

④所有的元素在调用时必须有结束标记

参考练习：GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_03.html

（2）复合组件---允许在一个组件中调用其它的组件

参考练习：GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_04.html

4.Props 属性(properties)

4.1 在React中通过props属性来实现父与子的通信

实现步骤：
           ①传值
               <MyHello myname="zhangsan"></MyHello>
           ②接收
               MyHello的组件中接收：
                   this.props.myname

参考练习：GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_05.html

4.2 事件绑定：onEvent={this.handleEvent}
举例：
<form onSubmit={this.handleSubmit}>

参考练习：GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_06.html

注意： props对象中的值是只读的！无法直接修改通过属性传来的值

4.3 this.props.children
       props对象中的属性和调用该组件时传递的属性是一一对应的！
       但是有一个比较特殊:this.props.children
       如果组件内的元素是一个 , object
       是多个，array
       没有空

React.Children.map(
                                               this.props.children,
                                               function(value,key){
                                                   return <li>{value}</li>;
                                               }
)

参考练习：GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_07.html

4.4 props实现方法的传递
三步骤： 1、定义方法
                       login:function(){
                           console.log(‘login success’);
                       }
                   2、将方法传递给组件
                       <MyButton myfunc={this.login}></MyButton>
                   3、通过props对象调用方法
                       在MyButton中
                           this.props.myfunc();

参考练习：GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_08.html

4.5 props传递方法是为了实现子与父的通信

React 传递一个带有参数的方法
①在父组件中定义方法
rcvMsg:function(msg){

               }
           ②调用子组件时传方法
               <Son myFunc={this.rcvMsg}></Son>
           ③在子组件内部调用方法
               this.props.myFunc(123)

5.Ref(reference 引用/参考)

<Son ref="mySon"></Son>
通过ref得到所指定的组件的实例或者元素： this.refs.mySon

参考练习：GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_09.html

每日小知识：

1.安装cnpm方法:npm install -g cnpm --registry=https://registry.npm.taobao.org

2. sublime text 安装插件方法：sublime textà安装package control=>pre=>emmet=>html-css-js prettify=>spacegray模板

【今天的笔记先做到这里啦，有关的练习代码在gitHub（https://github.com/CrystalAngelLee/ReactBasis）上陆续奉上，笔记也会每天更新的----来自Crystal2018年7月30日打卡总结】

6.state

React把组件比作是一个状态机器，组件中的数据通过状态来进行管理。

组件视图的变化本质都是数据的变化，将这个数据的变化通过状态来呈现出来。

(1)状态的3个基本操作：

初始化： getInitialState:function(){
return {
switch:true，
myValue:1
}
}

读状态：this.state.switch

写状态：this.setState(
{switch:false}，
function(){
//当状态设置成功之后的回调函数
}
);

(2)状态的功能：
① 状态是用来管理数据
② 状态中数据是可以绑定到视图中

注意：①当组件中状态发生变化时，组件是会被重新渲染的
②不允许在render方法中设置状态 setState(maximum stack size exceeded)

参考练习：GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_11.html
7.组件生命周期

组件中的生命周期可以分为3个阶段——mount update unmount
在对应的阶段有着自己的处理函数
componentWillMount
componentDidMount

componentWillUpdate
componentDidUpdate

componentWillUnmount

注意事项：
1、ref的使用必须要在componentDidMount之后才可以
2、update
当state、props发生变化时，会执行和update相关的处理函数。
和update相关的处理函数是有参数的，每个处理都有两个参数，分别对应的是props\state

参考练习：GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_12.html&Demo_13.html

8.表单组件的处理方式

受控的表单元素——value checked selected(不受个人控制的元素，受了React的控制)

解决方案：
   方案1：
       将受控表单元素转换为非受控表单元素
       value --> defaultValue

   方案2：
       给受控表单元素做个处理
           ①初始化一个状态
           ②将状态的值绑定到表单元素的 value/checked/selected
           ③在表单元素绑定对应的事件和对应的处理函数
               onChange
               handleChange:function(){
                   //修改状态中的值
                   this.setState({})
               }

参考练习：GITHUB[https://github.com/CrystalAngelLee/ReactBasis]练习文裆下Demo_14.html

日常小知识：

1.收一个yarn安装一直报错的解决网址：http://www.voidcn.com/article/p-yrikahtp-bos.html

2.如何在配置VScode同步代码到GitHub中：

配置环境变量
打开目录集成终端初始化仓库

参考站点：https://www.jianshu.com/p/e9dd2849cfb0

【以上来自Crystal的2018年7月31日打卡总结】

收一些学习react 的相关站点：

1、https://www.w3cplus.com/

CrystalAngelLee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React基础整理

前言：休了两个月的假期，手头上的知识有点遗漏很多了，赶着在入职前复习一轮，正好把之前的东西做一个完整的归纳。【PS：所有的笔记都可能在日后做更新补充】=============================================================================================一、搭建一个React环境基础【由于是在一台...
复制链接

扫一扫