React 面向组件编程

最新推荐文章于 2024-05-20 15:17:08 发布

0yizhiyang

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量267

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_58190023/article/details/129766338

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、基本理解和使用

1. 使用 React 开发者工具调试

在极简插件中下载React Developer Tools
地址：https://chrome.zzzmh.cn/#/theme

解压到当前文件夹，拖拽到Chrome中

2. react中定义组件

函数式组件

	<!-- 准备好一个容器 -->
	<div id="test"></div>
	<script type="text/babel">
		//1.创建函数式组件
		function MyComponent() {
                        //此处的this是undefined，因为babel编译后开启了严格模式
			console.log(this); 
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent />, document.getElementById('test'))
	</script>

执行了ReactDOM.render(…之后，发生了什么？

1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

类的复习

    <script>
        // 创建一个Person类
        class Person {
            // 构造器方法
            constructor(name, age) {
                // 构造器中的this是谁？ --- 类的实例对象
                this.name = name;
                this.age = age;
            }

            // 一般方法
            speak() {
                // speak方法放在哪里？  --- 类的原型对象上，供实例使用
                // 通过Person实例调用speak时，speak中的this就是Person实例
                console.log(`我叫${this.name}，我的年龄是${this.age}`)
            }
        }

        // 创建一个Person的实例对象
        const p1 = new Person('tom', 18)
        const p2 = new Person('jerry', 19)

        console.log(p1);
        console.log(p2);

        p1.speak()
        p2.speak()
    </script>

	<script>
		//创建一个Person类
		class Person {
			//构造器方法
			constructor(name, age) {
				//构造器中的this是谁？—— 类的实例对象
				this.name = name
				this.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
				this.school = '尚硅谷'
			}
			//重写从父类继承过来的方法
			speak() {
				console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);
				this.study()
			}
			study() {
				//study方法放在了哪里？——类的原型对象上，供实例使用
				//通过Student实例调用study时，study中的this就是Student实例
				console.log('我很努力的学习');
			}
		}
		const s1 = new Student('小张', 15, '高一')
		console.log(s1);
		s1.speak()
		s1.study()
	</script>

-总结

    1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
    2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
    3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。

类式组件


	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<script type="text/babel">
		//1.创建类式组件
		class MyComponent extends React.Component {
			render() {
				//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
				//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
				console.log('render中的this:', this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent />, document.getElementById('test'))
	</script>

执行了ReactDOM.render(…之后，发生了什么？

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

注意：

组件名必须首字母大写
虚拟 DOM 元素只能有一个根元素
虚拟 DOM 元素必须有结束标签

二、组件实例三大核心属性 1: state

1. 理解

1. state 是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2. 强烈注意

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

4. 使用方法

方法一

    constructor(props) {
        console.log('constructor');
        super(props)
        //初始化状态
        this.state = { isHot: false, wind: '微风' }
        //解决changeWeather中this指向问题
        this.changeWeather = this.changeWeather.bind(this)
    }

方法二

    //初始化状态
    state = { isHot: false, wind: '微风' }

3. 原生事件绑定

	<button id="btn1">按钮1</button>
	<button id="btn2">按钮2</button>
	<button onclick="demo()">按钮3</button>

	<script type="text/javascript">
		const btn1 = document.getElementById('btn1')
		btn1.addEventListener('click', () => {
			alert('按钮1被点击了')
		})

		const btn2 = document.getElementById('btn2')
		btn2.onclick = () => {
			alert('按钮2被点击了')
		}

		function demo() {
			alert('按钮3被点击了')
		}
	</script>

4. 类方法中的this指向

类方法中的this指向

	<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>

严格模式下的this指向

    function demo1() {
            console.log(this);
        }

        function demo2() {
            'use strict'
            console.log('严格模式下的this：', this);
        }

        demo1()
        demo2()

bind改变this指向

		function demo() {
			console.log(this);   // window
		}
		demo()

		// bind返回的是一个新函数
		const x = demo.bind({ a: 1, b: 2 })
		x()   // 对象

5. 案例

案例效果

方法一：state实现

	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<script type="text/babel">
		//1.创建组件
		class Weather extends React.Component {

			//构造器调用几次？ ———— 1次
			constructor(props) {
				console.log('constructor');
				super(props)
				//初始化状态
				this.state = { isHot: false, wind: '微风' }
				//解决changeWeather中this指向问题
				this.changeWeather = this.changeWeather.bind(this)
			}

			//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
			render() {
				console.log('render');
				console.log(this);
				//读取状态
				const { isHot, wind } = this.state
				return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
			}

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

				console.log('changeWeather');
				//获取原来的isHot值
				const isHot = this.state.isHot
				//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
				this.setState({ isHot: !isHot })
				console.log(this);

				//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
				//this.state.isHot = !isHot //这是错误的写法
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<Weather />, document.getElementById('test'))
	</script>

方法二：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);

代码实现

	<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>

三、组件实例三大核心属性2: props

1. 理解

    1. 每个组件对象都会有props(properties 的简写)属性
    2. 组件标签的所有属性都保存在props中

2. 作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改props数据

3. 展开运算符

数组的方法

		let arr1 = [1, 3, 5, 7, 9]
		let arr2 = [2, 4, 6, 8, 10]
		let arr3 = [...arr1, ...arr2]      //连接数组
		console.log('原数组arr1：', arr1);
		console.log('原数组arr2：', arr2);
		console.log('展开数组arr1：', ...arr1);     //展开一个数组
		console.log('合并两个数组：', arr3);

在函数中使用

		//在函数中使用
		function sum(...numbers) {
			console.log('numbers:', numbers);
			console.log('...numbers:', ...numbers);

			// 求和
			return numbers.reduce((preValue, currentValue) => {
				return preValue + currentValue
			})
		}
		console.log(sum(1, 2, 3, 4));

在对象中使用

展开运算符不能展开对象，但ES6新语法可以 {…对象}

		//构造字面量对象时使用展开语法
		let person = { name: 'tom', age: 18 }
		//console.log(...person); //报错，展开运算符不能展开对象
    
		console.log('原对象',person);
                console.log('...person', {...person});
                let {name, age} = person
                console.log(name, age);

                person.name = 'jerry' 
                console.log('修改name后的对象',person);

		//构造字面量对象时使用展开语法
		let person = { name: 'tom', age: 18 }
		//console.log(...person); //报错，展开运算符不能展开对象
    
		console.log('原对象',person);

		//合并的同时改属性
		let person2 = { ...person, name: 'jack', address: "地球" }
		console.log('合并的同时改属性',person2);

4. 编码操作

内部读取某个属性值

    this.props.name

对props中的属性值进行类型限制和必要性限制

第一种方式（React v15.5 开始已弃用）

    Person.propTypes = {
        name: React.PropTypes.string.isRequired,
        age: React.PropTypes.number
    }

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

    Person.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number.
    }

扩展属性: 将对象的所有属性通过props传递

    <Person {...person}/>

默认属性值

    Person.defaultProps = {
        age: 18,
        sex:'男'
    }

组件类的构造函数

    constructor(props){
        super(props)
        console.log(props)//打印所有属性
    }

5. 案例

使用props渲染

	<div id="test1"></div>
	<hr>
	<div id="test2"></div>

	<script type="text/babel">
		//创建组件
		class Person extends React.Component {
			render() {
				// console.log(this);
				const { name, age, sex } = this.props
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age + 1}</li>
					</ul>
				)
			}
		}
		//渲染组件到页面
		// 第一种渲染
		ReactDOM.render(<Person name="jerry" age={19} sex="男" />, document.getElementById('test1'))

		// 第二种渲染
		const p = { name: '老刘', age: 18, sex: '女' }
		ReactDOM.render(<Person {...p} />, document.getElementById('test2'))
	</script>

使用props进行限制渲染

引入prop-types，用于对组件标签属性进行限制

	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>

	<script type="text/babel">
		//创建组件
		class Person extends React.Component {
			render() {
				// console.log(this);
				const { name, age, sex } = this.props
				//props是只读的
				//this.props.name = 'jack' //此行代码会报错，因为props是只读的
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age + 1}</li>
					</ul>
				)
			}
		}
		//对标签属性进行类型、必要性的限制
		Person.propTypes = {
			name: PropTypes.string.isRequired, //限制name必传，且为字符串
			sex: PropTypes.string,//限制sex为字符串
			age: PropTypes.number,//限制age为数值
			speak: PropTypes.func,//限制speak为函数
		}
		//指定默认标签属性值
		Person.defaultProps = {
			sex: '男',//sex默认值为男
			age: 18 //age默认值为18
		}
		//渲染组件到页面
		ReactDOM.render(<Person name={100} speak={speak} />, document.getElementById('test1'))
		ReactDOM.render(<Person name="tom" age={18} sex="女" />, document.getElementById('test2'))

		const p = { name: '老刘', age: 18, sex: '女' }
		ReactDOM.render(<Person {...p} />, document.getElementById('test3'))

		function speak() {
			console.log('我说话了');
		}
	</script>

优化: 将对标签的限制写入Person类中

<script type="text/babel">
		//创建组件
		class Person extends React.Component {

			constructor(props) {
				//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
				// console.log(props);
				super(props)
				console.log('constructor', this.props);
			}

			//对标签属性进行类型、必要性的限制
			static propTypes = {
				name: PropTypes.string.isRequired, //限制name必传，且为字符串
				sex: PropTypes.string,//限制sex为字符串
				age: PropTypes.number,//限制age为数值
			}

			//指定默认标签属性值
			static defaultProps = {
				sex: '男',//sex默认值为男
				age: 18 //age默认值为18
			}

			render() {
				// console.log(this);
				const { name, age, sex } = this.props
				//props是只读的
				//this.props.name = 'jack' //此行代码会报错，因为props是只读的
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age + 1}</li>
					</ul>
				)
			}
		}

		//渲染组件到页面
		ReactDOM.render(<Person name="jerry" />, document.getElementById('test1'))

使用props的函数组件进行渲染

	<!-- 准备好一个“容器” -->
	<div id="test1"></div>

	<script type="text/babel">
		//创建组件
		function Person(props) {
			const { name, age, sex } = props
			return (
				<ul>
					<li>姓名：{name}</li>
					<li>性别：{sex}</li>
					<li>年龄：{age}</li>
				</ul>
			)
		}
		Person.propTypes = {
			name: PropTypes.string.isRequired, //限制name必传，且为字符串
			sex: PropTypes.string,//限制sex为字符串
			age: PropTypes.number,//限制age为数值
		}

		//指定默认标签属性值
		Person.defaultProps = {
			sex: '男',//sex默认值为男
			age: 18 //age默认值为18
		}
		//渲染组件到页面
		ReactDOM.render(<Person name="jerry" />, document.getElementById('test1'))
	</script>

四、组件实例三大核心属性 3: refs 与事件处理

1. 理解

组件内的标签可以定义ref属性来标识自己

2. 字符串形式的ref

    <input ref="input1"/>

案例

需求: 自定义组件, 功能说明如下:
    1. 点击按钮, 提示第一个输入框中的值
    2. 当第2个输入框失去焦点时, 提示这个输入框中的值

	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	<script type="text/babel">
		//创建组件
		class Demo extends React.Component {
			//展示左侧输入框的数据
			showData = () => {
				const { input1 } = this.refs
				alert(input1.value)
				console.log(input1);
			}
			//展示右侧输入框的数据
			showData2 = () => {
				const { input2 } = this.refs
				alert(input2.value)
			}
			render() {
				return (
					<div>
						<input ref="input1" type="text" placeholder="点击按钮提示数据" /> <br />
						<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" /> <br />
						<button onClick={this.showData}>点我提示</button> <br />
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))
	</script>

3. 回调形式的ref

    <input ref={(c)=>{this.input1 = c}}

	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<script type="text/babel">
		//创建组件
		class Demo extends React.Component{
			//展示左侧输入框的数据
			showData = ()=>{
				const {input1} = this
				alert(input1.value)
			}
			//展示右侧输入框的数据
			showData2 = ()=>{
				const {input2} = this
				alert(input2.value)
			}
			render(){
				return(
					<div>
						<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/> <br/>
						<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/> <br/>
						<button onClick={this.showData}>点我提示左侧的数据</button> <br/>
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
	</script>

回调函数形式的ref中回调执行次数的问题

<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>

解决方法

saveInput = (c)=>{
    this.input1 = c;
    console.log(c);
}
<input ref={this.saveInput} type="text"/><br/><br/>

完整代码

	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<script type="text/babel">
		//创建组件
		class Demo extends React.Component{
			state = {isHot:false}

			showInfo = ()=>{
				const {input1} = this
				alert(input1.value)
			}

			changeWeather = ()=>{
				//获取原来的状态
				const {isHot} = this.state
				//更新状态
				this.setState({isHot:!isHot})
			}

			saveInput = (c)=>{
				this.input1 = c;
				console.log(c);
			}

			render(){
				const {isHot} = this.state
				return(
					<div>
						<h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
						{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}
						<input ref={this.saveInput} type="text"/><br/><br/>
						<button onClick={this.showInfo}>点我提示输入的数据</button>
						<button onClick={this.changeWeather}>点我切换天气</button>
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo/>,document.getElementById('test'))
	</script>

4. createRef创建ref容器

    myRef = React.createRef()
    <input ref={this.myRef}/>

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的

	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<script type="text/babel">
		//创建组件
		class Demo extends React.Component{
			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="点击按钮提示数据"/> <br/>
						<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/> <br/>
						<button onClick={this.showData}>点我提示左侧的数据</button> <br/>
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
	</script>

5、事件处理

    (1) 通过onXxx属性指定事件处理函数(注意大小写)
        a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
        b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
    (2)通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref

五、收集表单数据

1. 表单的组件分类

受控组件
非受控组件

2. 非受控组件

需求: 定义一个包含表单的组件，输入用户名密码后, 点击登录提示输入信息

	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<script type="text/babel">
		//创建组件
		class Login extends React.Component{
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this
				alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input ref={c => this.username = c} type="text" name="username"/> <br/>
						密&ensp;&ensp;码：<input ref={c => this.password = c} type="password" name="password"/>  <br/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>

3. 受控组件

	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<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.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}

			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={this.saveUsername} type="text" name="username"/>
						密码：<input onChange={this.savePassword} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>

六、高阶函数和函数柯里化

1. 高阶函数

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

    1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
    2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
    3. 常见的高阶函数有：Promise、setTimeout、arr.map()等等

复习：对象相关的知识

    let a = 'name'
    let obj = {} // {name:'tom'}
    obj[a] = 'tom'
    console.log(obj);

	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<script type="text/babel">
		//创建组件
		class Login extends React.Component{
			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}

			//保存表单数据到状态中
			saveFormData = (dataType)=>{
				return (event)=>{
					this.setState({[dataType]:event.target.value})
				}
			}

			//表单提交的回调
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
						密码：<input onChange={this.saveFormData('password')} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>

2. 函数柯里化

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

    function sum(a){
        return(b)=>{
            return (c)=>{
                return a+b+c
            }
        }
    }

函数的柯里化

	<script type="text/javascript">
		/* function sum(a,b,c){
			return a+b+c
		} */

		function sum(a) {
			return (b) => {
				return (c) => {
					return a + b + c
				}
			}
		}
		const result = sum(1)(2)(3)
		console.log(result);
	</script>

不用函数柯里化的实现

	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<script type="text/babel">
		//创建组件
		class Login extends React.Component{
			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}

			//保存表单数据到状态中
			saveFormData = (dataType,event)=>{
				this.setState({[dataType]:event.target.value})
			}

			//表单提交的回调
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
						密码：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>