React学习笔记（一）：组件三大核心属性、组件的生命周期

1、React入门

1）、hello react

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>hello_react</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"> /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body></html>

2）、创建虚拟DOM的两种方式

1）使用jsx创建虚拟DOM

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>1_使用jsx创建虚拟DOM</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">const VDOM = <h1 id="title">Hello,React</h1>ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body></html>

2）使用js创建虚拟DOM

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2_使用js创建虚拟DOM</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript">//创建虚拟DOM React.createElement(标签名, 标签属性, 标签内容)const VDOM = React.createElement('h1', { id: 'title' }, 'Hello,React')ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body></html>

3）虚拟DOM与真实DOM

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>1_使用jsx创建虚拟DOM</title>
</head><body><div id="test"></div><div id="demo"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">const VDOM = <h1 id="title">Hello,React</h1>ReactDOM.render(VDOM, document.getElementById('test'))const TDOM = document.getElementById('demo');debuggerconsole.log('虚拟DOM', VDOM)console.log('真实DOM', TDOM)/*关于虚拟DOM:1.本质是Object类型的对象(一般对象)2.虚拟DOM比较轻,真实DOM比较重,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性3.虚拟DOM最终会被React转换为真实DOM,呈现在页面上*/</script>
</body></html>

3）、React JSX

1）jsx语法规则

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>jsx语法规则</title><style>.title {background-color: orange;width: 200px;}</style>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">const myId = 'demo'const myData = 'Hello,React'const VDOM = (<div><h2 className="title" id={myId}><span style={{ color: 'white', fontSize: '20px' }}>{myData}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{ color: 'white', fontSize: '20px' }}>{myData}</span></h2><input type="text"></input></div>)ReactDOM.render(VDOM, document.getElementById('test'))/*jsx语法规则:1.定义虚拟DOM时,不要写引号2.标签中混入JS表达式时要用{}3.样式的类名指定不要用class,要用className4.内联样式,要用style={{key:value}}的形式去写5.只有一个根标签6.标签必须闭合7.标签首字母1)若小写字母开头,则将标签转为html中同名元素,若html中无该标签对应的同名元素,则报错2)若大写字母开头,react就去渲染对应的组件,若组件中没有定义,则报错*/</script>
</body></html>

2）jsx练习

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>jsx练习</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">const data = ['Angular', 'React', 'Vue']const VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item, index) => {return <li key={index}>{item}</li>})}</ul></div>)ReactDOM.render(VDOM, document.getElementById('test'))    </script>
</body></html>

4）、模块与组件、模块化与组件化的理解

1）模块

向外提供特定功能的js程序，一般就是一个js文件

为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂

作用：复用js，简化js的编写，提高js运行效率

2）组件

用来实现局部功能效果的代码和资源的集合（html/css/js/image等等）

为什么要用组件：一个界面的功能更复杂

作用：复用编码，简化项目编码，提高运行效率

3）模块化

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

4）组件化

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

2、React面向组件编程

1）、基本理解和使用

1）函数式组件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>1_函数式组件</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建函数式组件function MyComponent() {console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>}//2.渲染组件到页面ReactDOM.render(<MyComponent />, document.getElementById('test'))/*执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么？1.React解析组件标签,找到了MyComponent组件2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中*/</script>
</body></html>

2）类式组件

类的基本知识：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>类的基本知识</title>
</head><body><script type="text/javascript">/*总结:1.类中的构造器不是必须写的,要对实例进行一些初始化的操作,如添加指定属性才写2.如果A类继承了B类,且A类中写了构造器,那么A类构造器中的super是必须要调用的3.类中所定义的方法,都是放在类的原型对象上,供实例去使用*///创建一个Person类class Person {//构造器方法constructor(name, age) {//构造器中的this是类的实例对象this.name = namethis.age = age}//一般方法speak() {//speak方法放在了类的原型对象上,供实例使用//通过Person实例调用speak时,speak中的this就是Person实例console.log(`我叫${this.name},我的年龄是${this.age}`)}}//创建一个Student类,继承于Person类class Student extends Person {constructor(name, age, grade) {super(name, age)this.grade = grade}//重写从父类继承过来的方法speak() {console.log(`我叫${this.name},我的年龄是${this.age},我读的是${this.grade}年级`)}study() {console.log('我很努力的学习')}}//创建一个Person的实例对象const p1 = new Person('tom', 18)const p2 = new Person('jerry', 19)console.log(p1)console.log(p2)p1.speak()p2.speak()const s1 = new Student('小张', 15, '高一')console.log(s1)s1.speak()s1.study()</script>
</body></html>

类式组件：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2_类式组件</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建类式组件class MyComponent extends React.Component {//render方法放在了MyComponent的原型对象上,供实例使用//render方法中的this就是MyComponent组件实例对象render() {console.log(this)return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>}}//2.渲染组件到页面ReactDOM.render(<MyComponent />, document.getElementById('test'))/*执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么？1.React解析组件标签,找到了MyComponent组件2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面上*/</script>
</body></html>

2）、组件三大核心属性：state

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>1_state</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建组件class Weather extends React.Component {//构造器调用1次constructor(props) {super(props)//初始化状态this.state = { isHot: true }//解决changeWeather中this指向问题this.changeWeather = this.changeWeather.bind(this)}//changeWeather点击几次调用几次changeWeather() {//state不可直接更改,必须通过setState进行更新,且更新是一种合并,不是替换const { isHot } = this.statethis.setState({ isHot: !isHot })}//render调用1+n次 1是初始化的那次 n是状态更新的次数render() {const { isHot } = this.statereturn <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>}}//2.渲染组件ReactDOM.render(<Weather />, document.getElementById('test'))</script>
</body></html>

state的简写方式：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2_state的简写方式</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Weather extends React.Component {//初始化状态state = { isHot: true }//自定义方法 要用赋值语句的形式+箭头函数changeWeather = () => {const { isHot } = this.statethis.setState({ isHot: !isHot })}render() {const { isHot } = this.statereturn <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>}}ReactDOM.render(<Weather />, document.getElementById('test'))</script>
</body></html>

小结：

1）state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）

2）组件被称为状态机，通过更新组件的state来更新对应的页面显示（重新渲染组件）

3）组件中render方法中的this为组件实例对象

4）组件自定义的方法中this为undefined，如何解决？

a.强制绑定this:通过函数对象的bind()

b.箭头函数

5）不能直接修改或更新状态数据

3）、组件三大核心属性：props

展开运算符：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2_展开运算符</title>
</head><body><script type="text/javascript">let arr1 = [1, 3, 5, 7, 9]let arr2 = [2, 4, 6, 8, 10]console.log(...arr1)//展开一个数组let arr3 = [...arr1, ...arr2]//连接数组console.log(...arr3)//在函数中使用function sum(...numbers) {return numbers.reduce((preValue, currentValue) => {return preValue + currentValue})}console.log(sum(1, 2, 3, 4))//构造字面量对象时使用展开语法let person = { name: 'tom', age: 18 }let person2 = { ...person }console.log(person2)//合并let person3 = { ...person, name: 'jack', address: '地球' }console.log(person3)</script>
</body></html>

1）props基本使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>1_props基本使用</title>
</head><body><div id="test"></div><div id="test2"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Person extends React.Component {render() {const { name, sex, age } = this.propsreturn (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age + 10}</li></ul>)}}ReactDOM.render(<Person name="tom" sex="女" age={18} />, document.getElementById('test'))const p = { name: 'jerry', sex: '男', age: 19 }ReactDOM.render(<Person {...p} />, document.getElementById('test2'))</script>
</body></html>

2）对props进行限制

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2_对props进行限制</title>
</head><body><div id="test"></div><div id="test2"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types,用于对组件标签属性进行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">class Person extends React.Component {render() {const { name, sex, age } = this.props//props是只读的return (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age + 10}</li></ul>)}}//对标签属性进行类型、必要性的限制Person.propTypes = {name: PropTypes.string.isRequired,//限制name必传,且为字符串sex: PropTypes.string,//限制sex为字符串age: PropTypes.number,//限制age为数值speak: PropTypes.func//限制speak为函数}//指定默认的标签属性值Person.defaultProps = {sex: '男',age: 20}ReactDOM.render(<Person name="tom" age={18} speak={speak} />, document.getElementById('test'))const p = { name: 'jerry', sex: '女' }ReactDOM.render(<Person {...p} />, document.getElementById('test2'))function speak() {console.log('我说话了')}</script>
</body></html>

3）props的简写方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>3_props的简写方式</title>
</head><body><div id="test"></div><div id="test2"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><!-- 引入prop-types,用于对组件标签属性进行限制 --><script type="text/javascript" src="../js/prop-types.js"></script><script type="text/babel">class Person extends React.Component {constructor(props) {//构造器中是否接收props,是否传递给super,取决于是否希望在构造器中通过this访问propssuper(props)console.log('constructor', this.props)}//对标签属性进行类型、必要性的限制static propTypes = {name: PropTypes.string.isRequired,//限制name必传,且为字符串sex: PropTypes.string,//限制sex为字符串age: PropTypes.number,//限制age为数值speak: PropTypes.func//限制speak为函数}//指定默认的标签属性值static defaultProps = {sex: '男',age: 20}render() {const { name, sex, age } = this.props//props是只读的return (<ul><li>姓名：{name}</li><li>性别：{sex}</li><li>年龄：{age + 10}</li></ul>)}}ReactDOM.render(<Person name="tom" age={18} speak={speak} />, document.getElementById('test'))const p = { name: 'jerry', sex: '女' }ReactDOM.render(<Person {...p} />, document.getElementById('test2'))function speak() {console.log('我说话了')}</script>
</body></html>

小结：

1）每个组件对象都会有props属性

2）组件标签的所有属性都保存在props中

3）props的作用：通过标签属性从组件外向组件内传递变化的数据

4）组件内部不要修改props数据

4）、组件三大核心属性：refs与事件处理

1）字符串形式的ref

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>1_字符串形式的ref</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Demo extends React.Component {//展示左侧输入框的数据showData = () => {const { input1 } = this.refsalert(input1.value)}//展示右侧输入框的数据showData2 = () => {const { input2 } = this.refsalert(input2.value)}render() {return (<div><input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;<button ref="button" onClick={this.showData}>点击提示左侧数据</button>&nbsp;<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /></div>)}}ReactDOM.render(<Demo />, document.getElementById('test'))</script>
</body></html>

2）回调函数形式的ref

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2_回调函数形式的ref</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Demo extends React.Component {//展示左侧输入框的数据showData = () => {const { input1 } = thisalert(input1.value)}//展示右侧输入框的数据showData2 = () => {const { input2 } = thisalert(input2.value)}render() {return (<div><input ref={currentNode => this.input1 = currentNode} type="text" placeholder="点击按钮提示数据" />&nbsp;<button onClick={this.showData}>点击提示左侧数据</button>&nbsp;<input ref={currentNode => this.input2 = currentNode} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /></div>)}}ReactDOM.render(<Demo />, document.getElementById('test'))</script>
</body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>3_回调ref中回调执行次数的问题</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Demo extends React.Component {state = { isHot: true }changeWeather = () => {const { isHot } = this.statethis.setState({ isHot: !isHot })}showData = () => {const { input1 } = thisalert(input1.value)}saveInput = (currentNode) => {this.input1 = currentNodeconsole.log('@', currentNode)}render() {const { isHot } = this.statereturn (<div><h2>今天天气很{isHot ? '炎热' : '凉爽'}</h2><button onClick={this.changeWeather}>点我切换天气</button><br /><br /><input ref={this.saveInput} type="text" placeholder="点击按钮提示数据" />&nbsp;<button onClick={this.showData}>点击提示左侧数据</button>&nbsp;</div>)}}ReactDOM.render(<Demo />, document.getElementById('test'))</script>
</body></html>

3）createRef创建ref容器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>4_createRef</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Demo extends React.Component {/*React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是专人专用的*/myRef = React.createRef()myRef2 = React.createRef()showData = () => {alert(this.myRef.current.value)}showData2 = () => {alert(this.myRef2.current.value)}render() {return (<div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;<button onClick={this.showData}>点击提示左侧数据</button>&nbsp;<input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />&nbsp;</div>)}}ReactDOM.render(<Demo />, document.getElementById('test'))</script>
</body></html>

4）事件处理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>事件处理</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Demo extends React.Component {/*1.通过onXxx属性指定事件处理函数(注意大小写)a.React使用的是自定义(合成)事件,而不是使用的原生DOM事件 ———— 为了更好地兼容性b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ———— 为了高效2.通过event.target得到发生事件的DOM元素对象 ———— 不要过度使用ref*/myRef = React.createRef()showData = () => {alert(this.myRef.current.value)}showData2 = (event) => {alert(event.target.value)}render() {return (<div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;<button onClick={this.showData}>点击提示左侧数据</button>&nbsp;<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />&nbsp;</div>)}}ReactDOM.render(<Demo />, document.getElementById('test'))</script>
</body></html>

5）、收集表单数据

1）非受控组件

非受控组件：表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用ref从DOM获取表单值）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>1_非受控组件</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Login extends React.Component {handleSubmit = (event) => {event.preventDefault() //阻止表单提交const { username, password } = thisalert(`你输入的用户名是：${username.value}，你输入的密码是${password.value}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名：<input ref={c => this.username = c} type="text" name="username" />&nbsp;密码：<input ref={c => this.password = c} type="password" name="password" />&nbsp;<button>登录</button></form>)}}ReactDOM.render(<Login />, document.getElementById('test'))</script>
</body></html>

2）受控组件

受控组件：组件中的状态是可以根据用户的输入，实时的进行改变，并且展示在界面上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2_受控组件</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Login extends React.Component {//初始化状态state = {username: '',password: ''}saveUsername = (event) => {this.setState({ username: event.target.value })}savePassword = (event) => {this.setState({ password: event.target.value })}handleSubmit = (event) => {event.preventDefault() //阻止表单提交const { username, password } = this.statealert(`你输入的用户名是：${username}，你输入的密码是${password}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveUsername} type="text" name="username" />&nbsp;密码：<input onChange={this.savePassword} type="password" name="password" />&nbsp;<button>登录</button></form>)}}ReactDOM.render(<Login />, document.getElementById('test'))</script>
</body></html>

6）、高阶函数和函数柯里化

1）高阶函数_函数柯里化

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>1_高阶函数_函数柯里化</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">/* 高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数常见的高阶函数有:Promise、setTimeout、arr.map()等等函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式 function sum(a) {return (b) => {return (c) => {return a + b + c}}}*/class Login extends React.Component {state = {username: '',password: ''}//保存表单数据到状态中saveFormData = (dataType) => {return (event) => {this.setState({ [dataType]: event.target.value })console.log(this.state)}}handleSubmit = (event) => {event.preventDefault()const { username, password } = this.statealert(`你输入的用户名是：${username}，你输入的密码是${password}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveFormData('username')} type="text" name="username" />&nbsp;密码：<input onChange={this.saveFormData('password')} type="password" name="password" />&nbsp;<button>登录</button></form>)}}ReactDOM.render(<Login />, document.getElementById('test'))</script>
</body></html>

2）不用柯里化的实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2_不用柯里化的实现</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Login extends React.Component {state = {username: '',password: ''}//保存表单数据到状态中saveFormData = (dataType, event) => {this.setState({ [dataType]: event.target.value })console.log(this.state)}handleSubmit = (event) => {event.preventDefault()const { username, password } = this.statealert(`你输入的用户名是：${username}，你输入的密码是${password}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名：<input onChange={event => this.saveFormData('username', event)} type="text" name="username" />&nbsp;密码：<input onChange={event => this.saveFormData('password', event)} type="password" name="password" />&nbsp;<button>登录</button></form>)}}ReactDOM.render(<Login />, document.getElementById('test'))</script>
</body></html>

7）、组件的生命周期

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>引出生命周期</title>
</head><body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">class Life extends React.Component {state = { opacity: 1 }death = () => {//卸载组件ReactDOM.unmountComponentAtNode(document.getElementById('test'))}//组件挂载完毕componentDidMount() {console.log('componentDidMount')this.timer = setInterval(() => {//获取原状态let { opacity } = this.state//减小0.1opacity -= 0.1if (opacity <= 0) {opacity = 1}//设置新的透明度this.setState({ opacity })}, 200)}//组件将要卸载componentWillUnmount() {console.log('componentWillUnmount')//清除定时器clearInterval(this.timer)}//初始化渲染、状态更新之后render() {console.log('render')return (<div><h2 style={{ opacity: this.state.opacity }}>React学不会怎么办？</h2><button onClick={this.death}>不活了</button></div>)}}ReactDOM.render(<Life />, document.getElementById('test'))</script>
</body></html>

组件从创建到死亡它会经历一些特定的阶段

React组件中包含一系列勾子函数（生命周期回调函数），会在特定的时刻调用

我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作

在这里插入图片描述

生命周期的三个阶段（旧）

1）初始化阶段：由ReactDOM.render()触发初次渲染

constructor()（构造器）
componentWillMount()（组件将要挂载的钩子）
render()
componentDidMount()（组件挂载完毕的钩子）

2）更新阶段：由组件内部this.setState()或父组件重新render触发

shouldComponentUpdate()（控制组件更新的阀门）
componentWillUpdate()（组件将要更新的钩子）
render()
componentDidUpdate()（组件更新完毕的钩子）

3）卸载组件：由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()（组件将要卸载的钩子）