最近开始接触react，本文是自己学习过程中做的一点学习笔记，如有错误欢迎指出哈哈哈

1、hello React

babel.js 的作用
（1) 浏览器不能直接解析 JSX 代码, 需要 babel 转译为纯 JS 的代码才能运行
（2) 只要用了 JSX，都要加上 type=“text/babel”, 声明需要 babel 来处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- react核心库 -->
    <script src="../../js//react.development.js"></script>
    <!-- 用于支持react支持dom操作 -->
    <script src="../../js//react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转换成js -->
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
    // 创建虚拟dom
    const VDOM=<h1>Hello,React</h1>
    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById('test'));
    
    </script>
</body>
</html>

2、创建虚拟dom的两种方式

纯 JS 方式(一般不用)，如果标签太多，会嵌套太多层
JSX 方式

//纯js方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- react核心库 -->
    <script src="../../js//react.development.js"></script>
    <!-- 用于支持react支持dom操作 -->
    <script src="../../js//react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转换成js -->
    <script src="../../js/babel.min.js"></script>
    <script type="text/javascript">
    // 创建虚拟dom
    // const VDOM=React.createElement(标签名，标签属性，标签内容)
    const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'));
    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById('test'));
    
    </script>
</body>
</html>

//JSX方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- react核心库 -->
    <script src="../../js//react.development.js"></script>
    <!-- 用于支持react支持dom操作 -->
    <script src="../../js//react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转换成js -->
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
    // 创建虚拟dom
    const VDOM=(
        <h1 id="title">
        <span>Hello,React</span>    
        </h1>
    )
    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById('test'));
    
    </script>
</body>
</html>

React 提供了一些 API 来创建一种 “特别” 的一般 js 对象

const VDOM = React.createElement('xx',{id:'xx'},'xx')

上面创建的就是一个简单的虚拟 DOM 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <div id="demo"></div>
    <!-- react核心库 -->
    <script src="../../js//react.development.js"></script>
    <!-- 用于支持react支持dom操作 -->
    <script src="../../js//react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转换成js -->
    <script src="../../js/babel.min.js"></script>
    <script type="text/babel">
    // 创建虚拟dom
    const VDOM=(
        <h1 id="title">
        <span>Hello,React</span>    
        </h1>
    )
    // 渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById('test'));
    console.log(VDOM);
    console.log(typeof VDOM);
    console.log(document.getElementById('demo'));
    </script>
</body>
</html>

虚拟 DOM 对象最终都会被 React 转换为真实的 DOM
我们编码时基本只需要操作 react 的虚拟 DOM 相关数据, react 会转换为真实
DOM 变化而更新界。

3、jsx语法规则：

全称: JavaScript XML

react 定义的一种类似于 XML 的 JS 扩展语法: JS + XML 本质是
React.createElement(component, props, …children)方法的语法糖
作用: 用来简化创建虚拟 DOM
写法：var ele = <h1>Hello JSX!</h1>
它不是字符串, 也不是 HTML/XML 标签
它最终产生的就是一个 JS 对象

1.定义虚拟DOM时，不要写引号。
2.标签中混入__JS表达式__时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    const myId="demo";
    const myData="Hello,React";
    const VDOM=(
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
                {myData}
            </h2>
            <span className="title" id={myId.toUpperCase()} style={{backgroundColor:"blue",fontSize:"26px"}}>{myData}</span>
            <input type="text"/>
        </div>
    )
    ReactDOM.render(VDOM,document.getElementById('test'));
    </script>
</body>
</html>

练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx小练习</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" >
		//模拟一些数据
		const data = ['Angular','React','Vue']
		//1.创建虚拟DOM
		const VDOM = (
			<div>
				<h1>前端js框架列表</h1>
				<ul>
					{
						data.map((item,index)=>{
							return <li key={index}>{item}</li>
						})
					}
				</ul>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

一定注意区分：【js语句(代码)】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：（可以用const a=…表达）
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

4、模块与组件、模块化与组件化

4.1、模块

理解：向外提供特定功能的 js 程序, 一般就是一个 js 文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用 js, 简化 js 的编写, 提高 js 运行效率

4.2、组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image 等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

4.3、模块化

当应用的 js 都以模块来编写的, 这个应用就是一个模块化的应用

4.4、组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

5、组件

5.1、函数式组件

1.React解析组件标签，找到了函数式组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
3.组件名和标签必须大写，函数必须要有返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建函数式组件
    function Demo(){
        console.log(this);
        return <h2> 我是用函数定义的组件（适用于简单组件的定义）</h2>
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    </script>
</body>
</html>

5.2、类式组件

执行了ReactDOM.render(<MyComponent/>，.......）之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        render(){
            return <h2>我是用类定义的组件（适用于复杂组件的定义） </h2>
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    </script>
</body>
</html>

6、组件实例的三大属性state

6.1、state中this指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            //初始化状态
            this.state={
                isHot:true
            }
        }
        render(){
            const {isHot}=this.state;
            return <h2>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            this.state={
                isHot:true
            }
        }
        render(){
            const {isHot}=this.state;
            return <h2 onClick={changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    function changeWeather(){
        console.log("标题被点击了");
    }
    </script>
</body>
</html>

如果是

 render(){
            const {isHot}=this.state;
            return <h2 onClick={demo（）}>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }

将会调用demo函数，没有点击控制台也会输出，undifined作为onClick的回调了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            this.state={
                isHot:true
            }
        }
//render是放在哪里的？—— Demo的原型对象上，供实例使用。
//render中的this是谁？—— Demo的实例对象 <=> Demo组件实例对象。
        render(){
            const {isHot}=this.state;
            return <h2 onClick={changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    function changeWeather(){
        console.log(this);
        console.log("标题被点击了");
    }
    </script>
</body>
</html>

babel在翻译的时候，禁止自定义函数指向window，所以changeWeather方法里触碰不到组件实例对象，不能读取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            this.state={
                isHot:true
            }
        }
        render(){
            const {isHot}=this.state;
            return <h2 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }
        changeWeather()
        {
        console.log(this);
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    </script>
</body>
</html>

changWeather已经放在类中了，是类中的方法了，render也是类中的方法，但是render中的this指向没有问题，因为执行了ReactDOM.render(<组件名/>…）之后，React解析组件标签，找到了组件。发现组件是使用类定义的，随后new出来该类的实例，并__通过该实例调用到原型上的render方法__。将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
所以render方法有被组件实例调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >
			class Person {
				constructor(name,age){
					this.name = name
					this.age = age
				}
				study(){
					//study方法放在了哪里？——类的原型对象上，供实例使用
					//通过Person实例调用study时，study中的this就是Person实例
					console.log(this);
				}
			}

			const p1 = new Person('tom',18)
			p1.study() //通过实例调用study方法
			const x = p1.study
			x()
		</script>
	</body>
</html>

相当于x是study方法的另一个引用，x()相当于直接调用，如果是直接调用，this会指向window，但是类中自定义方法都__局部开启了严格模式__，所以调用后this指向是undifine

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            this.state={
                isHot:true
            }
        }
        render(){
            const {isHot}=this.state;
            return <h2 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }
        changeWeather()
        {
        console.log(this);
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    </script>
</body>
</html>

所以这里面<h2 onClick={this.changeWeather}>相当于直接找到了changeWeather方法把它交给了onClick，一点击就直接调用这个方法了，不是实例对象调用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            this.state={
                isHot:true
            }
        }
        render(){
            const {isHot}=this.state;
            return <h2 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }
        changeWeather()
        {
        console.log(this);
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    const d=new Demo();
    d.changeWeather();
    </script>
</body>
</html>

模拟实例对象调用，谁调用指向谁，所以this指向实例对象

总的来说，就是

changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

6.2、this指向解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            this.state={
                isHot:true
            }
            this.changeWeather=this.changeWeather.bind(this);
        }
        render(){
            const {isHot}=this.state;
            return <h2 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }
        changeWeather()
        {
        console.log(this);
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    </script>
</body>
</html>

构造器中的this就是指向实例对象。

  this.changeWeather=this.changeWeather.bind(this);

第一个this指向实例对象，第二个this也指向实例对象。
看右边式子，虽然实例对象中没有changeWeather这个方法，但是会顺着原型链去找，然后就找到了方法，bind（）会生产一个函数，同时根据传递的第一个参数改变this指向，第三个当前也是指向实例对象的，所以生产一个新的函数的this指向改成指向构造器。
然后你有了一个指向实例对象的函数了。把这个函数放在了这个实例对象自身，并且把它命名为changeWeather

bind 没有规定，传递值和数组都可以。call 和 apply 函数的执行是直接执行的，而 bind 函数会__返回一个函数__，然后我们想要调用的时候才会执行。
然后点击后，触发的是实例对象上的changeWeather了，而不是顺着原型链找到的changeWeather了

改下名字，测试一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            this.state={
                isHot:true
            }
            this.tool=this.changeWeather.bind(this);
        }
        render(){
            const {isHot}=this.state;
            return <h2 onClick={this.tool}>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }
        changeWeather()
        {
        console.log(this);
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    </script>
</body>
</html>

6.3、setState的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            this.state={
                isHot:true
            }
            this.tool=this.changeWeather.bind(this);
        }
        render(){
            const {isHot}=this.state;
            return <h2 onClick={this.tool}>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }
        changeWeather()
        {
        this.state.isHot=!this.state.isHot
        console.log(this.state.isHot)
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    </script>
</body>
</html>

多次点击，页面没有变化，但是控制台会有输出

改了但是没完全改，react不认可

状态不可直接更改，要借助一个内置的api
这是直接更改，是错误的

 this.state.isHot=!this.state.isHot

调用setState

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js//react.development.js"></script>
    <script src="../../js//react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>
</head>
<body>
    <div id="test"></div>
    <script type="text/babel">
    // 创建类式定义组件
    class Demo extends React.Component{
        constructor(props){
            super(props)
            this.state={
                isHot:true
            }
            this.tool=this.changeWeather.bind(this);
        }
        render(){
            const {isHot}=this.state;
            return <h2 onClick={this.tool}>今天天气很{isHot?'炎热':'凉爽'}</h2>
        }
        changeWeather()
        {
        const isHot=this.state.isHot;
       console.log(this);
       this.setState({isHot:!isHot})
       console.log(this.state.isHot);
       
        }
    }
    ReactDOM.render(<Demo/>,(document.getElementById('test')));
    </script>
</body>
</html>

状态必须通过setState进行更新,且更新是一种合并，不是替换。其他状态值不会受到影响

6.4、简写state

类中可以直接写赋值语句，含义是给类的实例对象添加一个属性

class Car {
			constructor(name,price){
				this.name = name
				this.price = price
				// this.wheel = 4
			}
			//类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1
			a = 1
			wheel = 4
			static demo = 100
		}
		const c1 = new Car('奔驰c63',199)
		console.log(c1);
		console.log(Car.demo);

给__组件的实例对象__添加一个箭头函数，由于箭头函数中没有this，将从上下文寻找this，此时箭头函数中this指向实例对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state简写方式</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建组件
		class Weather extends React.Component{
			//初始化状态
			state = {isHot:false,wind:'微风'}

			render(){
				const {isHot,wind} = this.state
				return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
			}

			//自定义方法————要用赋值语句的形式+箭头函数
			changeWeather = ()=>{
				const isHot = this.state.isHot
				this.setState({isHot:!isHot})
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<Weather/>,document.getElementById('test'))
				
	</script>
</body>
</html>

6.5、总结

组件中 render 方法中的 this 为组件实例对象
组件自定义的方法中 this 为 undefined，如何解决？
a) 强制绑定 this: 通过函数对象的 bind()
b) 箭头函数
状态数据，不能直接修改或更新

7、组件实例的三大属性props

7.1、基本使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state简写方式</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建组件
		class Weather extends React.Component{
			render(){
                console.log(this);
				return( 
                    <ul>
                    <li>{this.props.name}</li>
                    <li>{this.props.age}</li>
                    </ul>
                    )
			}

		}
		ReactDOM.render(<Weather name="tom" age="19"/>,document.getElementById('test1'))
        ReactDOM.render(<Weather name="jack"age="18"/>,document.getElementById('test2'))
        ReactDOM.render(<Weather name="mike"age="17"/>,document.getElementById('test3'))
				
	</script>
</body>
</html>

7.2、批量传递props

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state简写方式</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../../js/babel.min.js"></script>

	<script ...

React学习笔记