react（一）
一、react基本概念
React是Facebook开发的一款js库，Facebook认为MVC无法满足他们的拓展需求
1、特点
- 不使用模板
- 不是一个mvc框架
- 响应式(数据更新非常简单)
- 轻量级JS库
2、原理
虚拟DOM -- 抽象成为一个JS对象 -- 生成/替换真实DOM
diff算法
1、虚拟DOM确保对界面上真正发生变化的部分进行实际的DOM操作
2、逐层次的进行节点比较
二、安装
官网地址：https://reactjs.org/
国内使用 npm 速度很慢，推荐使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
# 这样就可以使用 cnpm 命令来安装模块了
$ cnpm install [name]
三、JSX语法使用
1、资源引入
引用文件：
- react.js 核心文件
- react-dom.js 渲染页面中的DOM 当前文件依赖于react核心文件
- babel.js ES6转ES5，JSX语法转成javascript,方便浏览器进行代码兼容
# 引入资源的路径问题
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个实例</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<!-- 创建一个根节点 一个页面需要一个根节点 这个节点下的内容就会被react管理 -->
<div id="demo1"></div>
<script type="text/babel">
let myDom = <h1>你好</h1>;
ReactDOM.render(myDom,document.getElementById("demo1"));
</script>
</body>
</html>
2、注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1"></div>
<script type="text/babel">
let myDom = <h1>
{/* 我是注释 */}
你好
</h1>;
ReactDOM.render(myDom,document.getElementById("demo1"));
</script>
</body>
</html>
3、多标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hellow React</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<!-- 创建一个根节点 一个页面需要一个根节点 这个节点下的内容就会被react管理 -->
<div id="demo2">
</div>
<script type="text/babel">
// 多行标签，需要一个父元素包裹
// 以下方式会多出一个dom节点
// 可用<></> 空标签进行包裹
// 在create-react-app中，还可以用Fragment标签进行包裹，包裹前需要导入Fragment
let myDom = (
<div>
<div>我是第一个内容</div>
<div>我是第二个内容</div>
</div>
);
ReactDOM.render(myDom,document.getElementById("demo2"));
</script>
</body>
</html>
4、表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1"></div>
<script type="text/babel">
// 1.使用表达式 {表达式}
let text = "你好";
let num = 1314;
let user = {
name:"小明",
age:18
};
function fun(obj){
// 方式一：
// return "姓名是："+obj.name+"--------"+"年龄是："+obj.age;
// 方式二（ES6模板式）：
return `姓名是${obj.name},年龄是${obj.age}`;
}
let myDom = (<div>
<div>{text}</div>
<div>{num}</div>
{/* 2. 算法*/}
<div>{num + 1}</div>
{/* 3. 函数的使用*/}
<div>{fun(user)}</div>
</div>);
ReactDOM.render(myDom,document.getElementById("demo1"));
</script>
</body>
</html>
5、修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<style>
.demo1Style{
color:red;
}
</style>
</head>
<body>
<div id="demo1"></div>
<script type="text/babel">
// 三元/三目运算符
// let phone = 3900;
// let myDom = (<div>
// 当前手机价值{phone}----{phone>4000 ? '很贵' : '也不便宜'}
// </div>);
// 渲染数组
// var arr = [
// <p>新闻列表1</p>,
// <p>新闻列表2</p>,
// <p>新闻列表3</p>,
// <p>新闻列表4</p>,
// <p>新闻列表5</p>,
// <p>新闻列表6</p>
// ];
// let myDom = (<div>
// {arr}
// </div>);
// 属性设置
// let text = '点我去百度';
// let linkUrl = 'https://www.baidu.com';
// let myDom = <a href={linkUrl} type="_blank">{text}</a>
// 修改样式 backgroundColor不用 - 分割 要用驼峰命名
// let myStyle = {color:"red",backgroundColor:"red"};
// let myDom = <p style={myStyle}>修改样式</p>
// 在jsx中不能用class 这个属性 因为class是js关键字 要用 className 代替.demo1Style在<head>定义
let myDom = <p className="demo1Style">修改样式</p>
ReactDOM.render(myDom,document.getElementById("demo1"));
</script>
</body>
</html>
6、遍历列表
1、JS回顾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hellow React</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
// 1、定义一个对象
var obj = {
name:"小明",
age:18
};
// 打印的两种方式
console.log(obj.name);
console.log(obj["name"])
// 点的方式方便，但如果key是一个变量，就不能用这种方式
console.log(Object.keys(obj));// 返回一个数组类型的数据 返回对象obj的key
console.log(Object.values(obj));// 返回一个数组类型的数据 返回对象obj的value
</script>
</body>
</html>
2、map循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hellow React</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<!-- 创建一个根节点 一个页面需要一个根节点 这个节点下的内容就会被react管理 -->
<div id="demo1">
</div>
<script type="text/babel">
// 1、react列表渲染 map()
let arr = [
"吃饭","睡觉","打豆豆"
];
// 不加Key，页面控制台会报错。key必须独一无二
// return () 避免换行引起的错误
let myDom = arr.map((item,index)=>{
return (<p key={index}>{item}</p>)
});
ReactDOM.render(myDom,document.getElementById("demo1"));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
<style>
.demo1Style{
color:red;
}
</style>
</head>
<body>
<div id="demo1"></div>
<script type="text/babel">
let obj = {
name:"xixi",age:18,sex: '男'
};
let myDom = (<div>
{
Object.keys(obj).map((v,i)=>{
return (<p key={i}>便利的属性是{v}----便利出来的值是{obj[v]}</p>)
})
}
</div>);
ReactDOM.render(myDom,document.getElementById("demo1"));
</script>
</body>
</html>
3、for...in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hellow React</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
let arr = [
"吃饭","睡觉","打豆豆"
];
function fun(){
let newArr = [];
// 2、for...in 循环
for(let index in arr){
newArr.push(<p key={index}>{arr[index]}</p>)
}
return newArr;
}
ReactDOM.render(fun(),document.getElementById("demo1"));
</script>
</body>
</html>
4、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hellow React</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// 1、定义数组
let arr = [
"吃饭","睡觉","打豆豆"
];
// 定义与key对应的初始值
let index = -1;
function fun(){
let myDom = arr.map((v,i)=>{
return (<p style={{color:i==index?'red':''}} key={i} onClick={()=>{index=i;console.log({i});render()}}>{v}</p>)
});
return myDom;
}
function render(){
// 渲染后不会变，需要封装成方法，方便重新渲染
ReactDOM.render(fun(),document.getElementById("demo1"));
}
render();
</script>
</body>
</html>
四、组件
1、高耦合低内聚
高耦合就是把逻辑紧密的内容放在一个组件当中
低内聚把不同组件的依赖关系尽量弱化，每个组件尽可能的独立起来
2、组件的重要内容
1、构建方式
2、组件的属性
3、声明周期
3、演变过程
传统组件明显特点：
- 简单的封装
- 简单的声明周期的呈现
- 明显的数据流动
- 项目复杂时，项目结构样式和行为，很难维护
react组件：
- 属性：props
- 状态：state
- 生命周期
4、实现
通过组件可以把页面的ui部分切分成独立、高复用的部件。使开发者更专注于一个个独立的部件。
5、组件与组件化
组件：实现页面局部功能的代码集合，简化页面的复杂程度，提高运行效率
组件化：当前程序都是使用组件完成的，体现了组件化的应用
6、创建
1、函数组件/无状态组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// 父子组件
function MyComA(){
return (
<div>我是第1个</div>
)
}
function MyComB(){
return (
<div>我是第2个</div>
)
}
function MyComC(){
return (
<div>我是第3个</div>
)
}
// 父组件调用
function MyCom(){
return (
<div>
<MyComA/>
<MyComB/>
<MyComC/>
</div>
)
}
ReactDOM.render(<MyCom/>,document.getElementById("demo1"));
</script>
</body>
</html>
2、类组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// 创建类组件 组件名首字母大写
class MyCom extends React.Component{
render(){
return (
<div>类组件</div>
)
}
}
let com = <MyCom/>
ReactDOM.render(com,document.getElementById("demo1"));
</script>
</body>
</html>
五、props：外部数据渲染
1、使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// props
// props是react中的一个重要的属性 是组件对外的接口
// props可以从组件的外部向组件的内部进行数据的传递，也可以完成父组件给子组件的数据传递
// 注意：无论无状态组件还是类组件 我们都不能修改自身的props
// 一、无状态组件使用props
// 1.1、创建一个无状态组件
// function MyCom(props){
// return (
// <div>我是一个无状态组件。外部传递的数据是：{props.demo1},{props.demo2}</div>
// )
// }
// 二、类组件调用props
// 2.1 创建类组件
class MyCom extends React.Component {
render() {
return (
<div>
我是一个类组件 --- {this.props.demo1},{this.props.demo2}
</div>
)
}
}
// 定义变量
let text1 = "我是数据1";
let text2 = "我是数据2";
// 定义对象
let obj = {
demo1:"数据1",
demo2:"数据2"
}
// 方式一：传递多个变量
// ReactDOM.render(<MyCom demo1={text1} demo2={text2}/>,document.getElementById("demo1"));
// 方式二：传递多个变量。 ...obj：展开对象
ReactDOM.render(<MyCom {...obj}/>,document.getElementById("demo1"));
</script>
</body>
</html>
2、验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<script src="../node_modules/prop-types/prop-types.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// props
// 无状态组件的props 验证 和 默认值
// 一、无状态组件使用props
// 1.1、创建一个无状态组件
function MyCom(props){
return (
<div>我是一个无状态组件。外部传递的数据是：{props.demo1},{props.demo2}</div>
)
}
// 设置MyCom.props 默认值（16以后的版本写法）
MyCom.defaultProps={
demo1:"数据1",
demo2:"数据2"
}
// 如果是15x版本的react，写法为
// function MyCom(props){
// props.demo1=props.demo1||"数据1"
// return (
// <div>我是一个无状态组件。外部传递的数据是：{props.demo1}</div>
// )
// }
// props验证 -- 验证过来的数据是否符合我们期待的类型和请求，上线模式请取消
// 1、引入prop-types库
// npm install --save prop-types
MyCom.propTypes={
demo1:PropTypes.number // 验证是否为数字类型
}
ReactDOM.render(<MyCom/>,document.getElementById("demo1"));
</script>
</body>
</html>
3、默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<script src="../node_modules/prop-types/prop-types.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// props
// 类组件的props 验证 和 默认值
// 一、类组件使用props
// 1.1 创建类组件
class MyCom extends React.Component {
// 方式二：props 设置默认值
static defaultProps={
demo1:"数据1",
demo2:"数据2"
}
render() {
return (
<div>
我是一个类组件 --- {this.props.demo1},{this.props.demo2}
</div>
)
}
}
// 方式一：设置MyCom.props 默认值（16以后的版本写法）
// MyCom.defaultProps={
// demo1:"数据1",
// demo2:"数据2"
// }
ReactDOM.render(<MyCom/>,document.getElementById("demo1"));
</script>
</body>
</html>
4、外部渲染数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<script src="../node_modules/prop-types/prop-types.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// props 外部渲染数据
// 之前数据都是存在组件内部，如何渲染外部传递进来的props数据
let bool = true;
let dataArr = ["arr1","arr2","arr3"];
let MyCom=(props)=>{
return (
<div style={{display:bool?'block':'none'}}>
{
props.arr.map((v,i)=>{
return <p key={i}>{v}</p>
})
}
</div>
)
}
let Com=()=>{
return (<div>
<h1 onClick={()=>{bool=!bool;render();}}>父组件</h1>
<MyCom arr={dataArr}/>
</div>)
}
function render(){
ReactDOM.render(<Com/>,document.getElementById("demo1"));
}
render();
</script>
</body>
</html>
六、state：内部数据渲染
1、state的定义 与 props的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// 1、state与props的区别
// state是可变的
// props对于当前页面组件，是只读，如果想要修改props，则需要修改传递数据给当前组件的父组件的内容进行修改
// props是组件的对外的接口
// state是组件的对内的接口
// 组件内可以引用其他组件 组件之间的引用就形成了一个树状的接口
// 如果下层组件需要使用上层组件的数据，上层组件就可以通过下层组件的props进行数据传递
// 组件除了使用上层组件传递的数据外，自身也会有需要管理的数据，对内的管理属性就是state
// react只需要关心的是数据，当数据改变页面自动发生改变。
// 状态state等同于页面中的数据 状态/数据改变，页面中对应的数据绑定内容就会被react自动进行改变
// 声明式渲染：一切的数据改变都不用我们关心，只需要声明好数据，react就会自动对于数据进行相应的改变
// 如果使用状态，那么不能使用无状态组件
class Com extends React.Component{
// ES6中不管子类写不写constructor 在new实例的时候都会自动补上constructor
// 可以不写constructor，但是如果写了必须要写super()
// super()：作用就是指向父类的构造方法
constructor(props){
// 如果想在constructor使用props，那么super中必须写上props
super(props)
// 定义 state
this.state={
name:"xixi",
age:18
}
}
render(){
return (
<div>
{/* this.setState({key:newValue}) 异步的 react自动触发render()进行数据渲染*/}
<button onClick={()=>{this.setState({name:"haha"})}}>点我改变state的数据</button>
<div>
我是一个类组件---{this.state.name},{this.state.age}
</div>
</div>
)
}
}
ReactDOM.render(<Com/>,document.getElementById("demo1"));
</script>
</body>
</html>
2、修改state数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
let bool = true;
// this.setState({})是异步
class Com extends React.Component{
constructor(props){
super(props)
this.state={
name:"xixi",
age:18,
newString:'<p>字符串</p>',
newHtml:<p>标签</p>
}
}
fun=()=>{
bool=!bool;
let name,age;
if(bool){
name = 'xixi';
age = 18;
}else {
name = 'haha';
age = 20;
}
// 异步，增加回调函数。()=>{}
this.setState({
name:name,
age:age
},()=>{
console.log(this.state.name,this.state.age)
})
}
render(){
return (
<div>
{/*fun不加()，如果加了会自动执行*/}
<button onClick={this.fun}>点我试试</button>
{this.state.name},{this.state.age}
<div>{this.state.newString}</div>
{/*字符串插入标签用（__HTML两个下划线）：dangerouslySetInnerHTML={{__html:你要插入的字符串标签}}}*/}
<div dangerouslySetInnerHTML={{__html:this.state.newString}}></div>
<div>{this.state.newHtml}</div>
</div>
)
}
}
ReactDOM.render(<Com/>,document.getElementById("demo1"));
</script>
</body>
</html>
七、refs：转发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// refs 转发
// react当中提供一个ref的数据（不能再无状态组件当中使用，因为无状态组件没有实例）
// 表示当前组件的真正实例的引用 它会返回绑定当前属性的元素
// 标识组件内部的元素 -- 方便我们查找
// react提供 三种方式进行ref的使用
// 1、字符串
// 2、回调函数（推荐）就是在dom节点上或者组件上挂载函数
// 函数的入参形式是dom节点 达到的效果和字符串是一样的 都是获取值的引用
// 3、React.createRef(React16.3新提供的一种方式)
// 把值赋给一个变量 通过ref挂载在节点或者组件上 使用ref的current属性拿到这个节点
// 官方建议不要过度使用refs对逻辑处理 需要优先考虑state
class Com extends React.Component{
constructor(props){
super(props)
this.myRef=React.createRef();
}
fun=()=>{
// 1、字符串
// console.log(this.refs.demoInput.value)
// 2、回调函数
// console.log(this.textinput.value)
// 3、React.createRef
console.log(this.myRef.current.value)
}
render(){
return (<div>
{/*1、字符串
<input type="text" ref="demoInput" placeholder="请输入"/>
*/}
{/*、回调函数
<input type="text" ref={(input)=>{this.textinput=input}} placeholder="请输入"/>
*/}
<input type="text" ref={this.myRef} placeholder="请输入"/>
<button onClick={this.fun}>点我得到输入框的值</button>
</div>)
}
}
ReactDOM.render(<Com/>,document.getElementById("demo1"));
</script>
</body>
</html>
八、事件与this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hellow React</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// react事件处理
// 绑定事件使用小驼峰命名法，在绑定函数的时候不能加() -- 函数会立即执行
// 一、修改this指向
// 1、bind方式原地绑定
// 2、函数通过箭头函数进行创建
// 3、constructor中提前绑定
// 4、把事件调用写成箭头函数的调用方式
class Com extends React.Component{
constructor(props){
super(props)
this.func=this.func.bind(this)
}
funa() {
console.log(this)
}
funb=()=> {
console.log(this)
}
func() {
console.log(this)
}
fund() {
console.log(this)
}
fune=(i)=>{
console.log(i)
}
funf=(i,e)=>{
console.log(i)
console.log(e)
}
render(){
return (<div>
<button onClick={this.funa.bind(this)}>bind方式</button>
<button onClick={this.funb}>箭头方式</button>
<button onClick={this.func}>提前绑定方式</button>
<button onClick={()=>{this.fund()}}>调用方式为箭头函数</button>
<h1>函数实参传递</h1>
<button onClick={this.fune.bind(this,"bind方式")}>点我传递实参-bind方式</button>
<button onClick={()=>{this.fune("箭头函数")}}>点我传递实参-箭头函数</button>
<button onClick={(e)=>{this.funf("传递事件对象",e)}}>点我传递实参-传递事件对象</button>
</div>)
}
}
ReactDOM.render(<Com/>,document.getElementById("demo1"));
</script>
</body>
</html>
九、条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hellow React</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// 条件渲染 -- 根据状态的变化只渲染其中的一部分
// if语句 jsx中不允许有if
class Com extends React.Component{
constructor(props){
super(props)
this.state={
bool:true
}
}
fun=()=>{
this.setState({
bool:!this.state.bool
})
}
render(){
let text;
if(this.state.bool){
text = '你好'
}else {
text = '再见'
}
return (<div>
<button onClick={this.fun}>点我修改状态</button>
{text}
<div>三元运算：{this.state.bool?'呵呵':'哈哈'}</div>
</div>)
}
}
ReactDOM.render(<Com/>,document.getElementById("demo1"));
</script>
</body>
</html>
十、状态提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="demo1">
</div>
<script type="text/babel">
// 状态提升 多个组件需要反映相同的变化数据 提升数据到最近的父组件中
// 多个子组件需要利用对方状态的情况下 需要 状态提升
class A extends React.Component{
constructor(props){
super(props)
}
render(){
return (<div>
我是A组件--{this.props.text}
</div>)
}
}
class B extends React.Component{
constructor(props){
super(props)
}
render(){
return (<div>
我是B组件--{this.props.text}
</div>)
}
}
class Com extends React.Component{
constructor(props){
super(props)
this.state={
commentText:"A和B都想用的数据"
}
}
fun=()=>{
this.setState({
commentText:"修改：A和B都想用的数据"
})
}
render(){
return (<div>
我是com组件
<button onClick={this.fun}>点我换公用参数</button>
<A text={this.state.commentText}/>
<B text={this.state.commentText}/>
</div>)
}
}
ReactDOM.render(<Com/>,document.getElementById("demo1"));
</script>
</body>
</html>