React笔记（腾讯课堂-最受欢迎的react框架【爱前端】）（react基础）
1.Hello World
index.html
main.js
import React from "react";
import {render} from "react-dom";
import App from "./App.js";
render(
App.js
import React from "react";
class App extends React.Component{
render() {
return hello
}
}
export default App;2.函数、数组、样式
main.js
import React from "react";
import {render} from "react-dom";
import App from "./App.js";
//ES6形式定义组件的调用
render(
App.js
import React from "react";
//ES6形式定义组件
class App extends React.Component{
//类中定义的函数
haha(lanmu) {
if(lanmu="篮球") {
return (
- 乔丹
- 科比
- 沃尔
);
} else if(lanmu="足球") {
return (
- djfh
- dsfs
- fhyg
);
}
};
render() {
//render中定义的函数
let xixi = () => {
return(
我是render中定义的函数:1+1={1+1}
);
}
//设置样式:方法二
let mystyle = {
"width":"600px",
"height":20+200+"px",
"backgroundColor":"gray",
"margin":"10px auto"
}
//数组:要求有key属性，属性值不能重复
let domarr = [
数组元素1
,
数组元素2
,
数组元素3
];
let arr = ["白板","妖姬","二手"].map((item,index)=>{
return {item}
});
return (
hello
北京时间：{this.props.date.toLocaleDateString()}
{/*调用类中的函数:加this*/}
{this.haha("篮球")}
{/*调用render中的函数*/}
{xixi()}
{/*设置样式:方法一*/}
{/*设置样式:方法二*/}
{/*react数组（含有DOM）自动展开*/}
{domarr}
{arr}
);
}
}
export default App;
3.react的数据传递：state:自治的不涉及传值，props:父组件数据传递给子组件，context：祖先组件数据传递给后代组件
只有这三兄弟才会引发virtual DOM 的改变，从而改变DOM.
A.state：改变内部的值
show.js
import React from "react";
import {render} from "react-dom";
//连接State.js(状态)
import State from "./State.js";
render(
state.js
import React from "react";
class State extends React.Component{
//构造函数:初始化状态
constructor() {
super();//要求调用super
this.state = {//定义state
a:100
}
}
add() {
this.setState({//改变state。改变a的值，只能用this.setState
a: this.state.a + 1 //不能写成++
})
}
render() {
return (
{this.state.a}{/* 使用state */}
)
}
}
export default State;B.props:父组件给子组件传递数据
安装prop-types:cnpm install --save-dev prop-types
show.js
import React from "react";
import {render} from "react-dom";//连接Props.js（父组件数据传递给子组件）import Props from "./Props.js";
render(
props.js
import React from "react";
import Props2 from "./Props2.js";
class Props extends React.Component{
constructor() {
super();
}
render() {
return (
props2.js
import React from "react";
//引入PropTypes验证props的有效性
import {PropTypes} from "prop-types";
class Props2 extends React.Component{
constructor(param) {
super();
// alert(param.name);//构造函数中的参数param.name传入的是this.props.name
this.state = {
num:param.num //将param.name的值传给this.state.name,所以最终是将this.props.name值传给this.state.name
}
}
render() {
return (
复合组件：我是{this.props.name}
{/* this.props是固定的，调用时属性为name，打印出name的属性值 */}
{/* props只能打印不能更改，数据是单向的 */}
{/* state能改变数据 */}
this.props.num为：{this.props.num}
this.state.num为：{this.state.num}
{/* 调用this.state.num，值与上方相同 */}
{this.setState({num:this.state.num + 1})}}/>
{/* 点击后this.state.num改变，this.props.num不变 */}
);
}
}
//组件传入的参数验证:当调用时没传入或传错类型name和num值时报错
//类名.propTypes
Props2.propTypes = {
name:PropTypes.string.isRequired,
num:PropTypes.number.isRequired
}
export default Props2;C.子组件改变父组件的数据:
用奇淫技巧：父组件设置setState函数传递给子组件，子组件调用该函数并改变其值，使得父组件改变state从而改变数据
show.js
//连接PropsReverse.js 子组件改变父组件数据（后期用redux代替）
import PropsReverse from "./PropsReverse.js";
render(
PropsReverse.js
//子组件改变父组件数据（后期用redux代替）
import React from "react";
import PropsReverse2 from "./PropsReverse2.js";
class PropsReverse extends React.Component{
constructor() {
super();
this.state={
a:1
}
}
setA(number) {
this.setState({'a':number});
}
render() {
return (
我是PropsReverse父组件，我有一个a状态：{this.state.a}
PropsReverse2.js
import React from "react";
class PropsReverse2 extends React.Component {
constructor() {
super();
}
render() {
return (
子组件收到父组件数据：{this.props.a}
{this.props.setA(this.props.a+1)}} />
);
}
}
export default PropsReverse2;
D.context:可跨级传递数据，祖先的数据可传递给后代
改变爷爷数据值时，孙子接受爷爷的数据值也跟着改变
show.js
import React from "react";
import {render} from "react-dom";
//连接Yeye.js
import Yeye from "./Yeye.js";
render(
Yeye.js
import React from "react";
import Baba from "./Baba.js";
import {PropTypes} from "prop-types";
class Yeye extends React.Component{
constructor() {
super();
this.state = {
a:10
}
}
addA() {
this.setState({
a: this.state.a+1
})
}
render() {
return (
我是爷爷{this.state.a}
{/* 改变爷爷数据值时，孙子接受爷爷的数据值也跟着改变 */}
Baba.js
import React from "react";
import Sunzi from "./Sunzi.js";
//引入PropTypes验证props的有效性
// import {PropTypes} from "prop-types";
class Baba extends React.Component{
constructor() {
super();
}
render() {
return (
我是爸爸
Sunzi.js
import React from "react";
import {PropTypes} from "prop-types";
class Sunzi extends React.Component{
constructor() {
super();
}
render() {
return (
我是孙子
通过context取得爷爷是数据：{this.context.a}
);
}
}
//获取家族共享数据
Sunzi.contextTypes = {
a:PropTypes.number
}
export default Sunzi;E.context:后代组件改变祖先组件数据：也是用奇淫技巧：共享祖先包含setState函数，后代组件调用该函数改值
Yeye.js
import React from "react";
import Baba from "./Baba.js";
import {PropTypes} from "prop-types";
class Yeye extends React.Component{
constructor() {
super();
this.state = {
a:10
}
}
addA() {
this.setState({
a: this.state.a+1
})
}
render() {
return (
我是爷爷{this.state.a}
{/* addA自己使用，改变爷爷数据值时，孙子接受爷爷的数据值也跟着改变 */}
Sunzi.js
import React from "react";
import {PropTypes} from "prop-types";
class Sunzi extends React.Component{
constructor() {
super();
}
render() {
return (
我是孙子
通过context取得爷爷是数据：{this.context.a}
);
}
}
//获取家族共享数据
Sunzi.contextTypes = {
a:PropTypes.number,
addA:PropTypes.func
}
export default Sunzi;4.实时表单输出
Realoutput.js
import React from "react";
class Realoutput extends React.Component{
constructor(props) {
super();
this.state = {
txt:"hello"
}
}
change(event) {
this.setState({
txt:event.target.value
})
}
render() {
return (
{this.state.txt}
);
}
}
export default Realoutput;5.ref:DOM钩子
Ref.js
//ref:DOM钩子
import React from "react";
class Ref extends React.Component{
constructor() {
super();
}
render() {
return (
this.refs.mybox.style.backgroundColor="yellow"} />
);
}
}
export default Ref;