前言:
休了两个月的假期,手头上的知识有点遗漏很多了,赶着在入职前复习一轮,正好把之前的东西做一个完整的归纳。【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 的相关站点: