React 组件：
组件是React的一等公民，使用React组件，组件表示页面中的部分功能，多个组件的组合实现了整个完整的页面功能。
组件可复用，独立，可组合。
1.React 组件创建：
1.1 使用函数创建组件：
函数组件：使用JS的函数（或箭头函数）创建的组件
// 导入React：importReactfrom"react"; importReactDOMfrom"react-dom"// 函数组件：functionTitle(){ return ( <div>你好！世界！！！</div> ) }
渲染函数组件：用函数名作为组件标签名，组件可以使用单标签也可以使用双标签。
// 渲染：ReactDOM.render(<Title/>, document.getElementById("root"))
1.2 使用类创建组件：
类组件：使用ES6 的class创建的组件。
1.3 抽离组件为单独的JS文件：
2.React 事件处理：
2.1 事件绑定：
React事件绑定语法与DOM事件语法相似。语法是on事件命（首字母大写）就是事件处理程序，React事件采用驼峰命名法。
// 定义一个函数组件：functionFuncComponent() { // 点击事件回调函数：functionhandler() { alert("触发点击事件！") } // 返回JSX：return ( // 事件绑定：<buttononClick={handler}>Click Me</button> ) }
/** * 定义一个类型组件 */classClassComponentextendsReact.Component{ // 点击事件回调函数：handler() { alert("触发点击事件！") } // 类组件中需要声明一个render函数，函数返回值是一个JSX：render() { // 返回JSX：return ( // 事件绑定：<buttononClick={this.handler}>Click Me</button> ) } }
2.2 事件对象：
可以通过事件处理函数的参数获取到事件对象，React中的事件对象叫做：合成事件（对象）。合成事件兼容所有的浏览器，无需担心跨浏览器兼容性问题。
// 点击事件回调函数：handler(event) { console.log(event) }
在事件回调函数入参处声明一个event参数，这个参数接受合成事件对象。可以通过合成事件对象阻止浏览器默认行为：
event.preventDefault()
3.状态组件：
React中的组件类型被分为了两类：函数组件，又被称为无状态组件；类组件，又被称为有状态组件。状态（state）即数据。
函数组件没有自己的状态，自负责数据展示。类组件有自己的状态，负责更新UI。React中想要实现该功能，就要使用类组件（有状态组件）。
有状态组件通过 state()和setState()两个方法可以实现对状态（数据）的获取和修改。
3.1 state 方法：
状态（state）即数据，是组件内部的私有数据，只能在组件内部使用。state的值类型是对象数据类型，表示一个组件中可以有多个数据。
// 设置类组件中的数据（状态）：state= { count : 1}
在JSX中使用类组件中的state属性值：
<div>{this.state.count}</div>
3.2 setState 方法：
类组件中的state属性是可以改变的，通过类组件中提供的setState()方法进行修改：
// 点击事件回调函数：handler= ()=> { this.setState({ count: this.state.count+1 }) }
setState()方法参数传入的是一个state对象。注意：不要直接修改state中的值。setState()方法体现了React的数据驱动视图特性，在satet中修改的数据会实时更新到UI页面中。
实现一个简单的计数器功能，点击按钮之后，计数加一
// 导入React：importReactfrom"react"; importReactDOMfrom"react-dom"// 类组件：classAPPextendsReact.Component{ constructor(props) { super(props); // 初始化statethis.state= { count: 0 } } // 返回渲染组件：render(){ return ( <div><h1>计算器:{this.state.count}</h1><buttononClick={() => { this.setState({ count: this.state.count+1 }) }}>点击加一</button></div> ) } } // 渲染：ReactDOM.render(<APP/>, document.getElementById("root"))
3.3 JSX 抽离事件回调函数：
JSX中掺杂过多的的JS逻辑代码会显得十分混乱。可以将JavaScript逻辑抽离到单独的方法中，保证JSX结构的清晰。
4.事件绑定 this 指向：
需要指定this指向，否则可能导致如下问题：
这个问题就是由于this指向问题导致的，普通函数中没有this指向，所以this指向为undefined，所以这里会报错没有找到属性，因此需要指定this指向。
4.1 箭头函数：
利用箭头函数自身不绑定this的特点，箭头函数本身是没有this指向的，他会一直向外查找并复用外层结构的this指向。
还可以使用事件回调箭头函数中调用普通函数：
4.2 Function.prototype.bind()：
利用ES6中bind方法，将事件处理程序中的this与组件实例绑定到一起。
// 导入React：importReactfrom"react"; importReactDOMfrom"react-dom"// 类组件：classAPPextendsReact.Component{ constructor(props) { super(props); // 初始化statethis.state= { count: 0 } // 绑定this：this.add=this.add.bind(this) } add(){ this.setState({ count: this.state.count+1 }) } // 返回渲染组件：render(){ return ( <div><h1>计算器:{this.state.count}</h1><buttononClick={this.add}>点击加一</button></div> ) } } // 渲染：ReactDOM.render(<APP/>, document.getElementById("root"))
4.3 类组件箭头函数：
使用类组件中定义的箭头函数（实例方法）作为事件回调函数。
// 点击事件回调函数：handler= () => { this.setState({ count: this.state.count+1 }) } // 类组件中需要声明一个render函数，函数返回值是一个JSX：render() { // 返回JSX：return ( <div><div>{this.state.count}</div> {/*使用箭头函数作为事件的*/} <buttononClick={this.handler}>Click Me</button></div> ) }
5.组件表单处理：
5.1 受控组件：
5.2 非受控组件：
借助ref，使用原生DOM方式来获取表单元素值。ref 的作用获取DOM或者组件。
// 导入React：importReactfrom"react"; importReactDOMfrom"react-dom"// 类组件：classAPPextendsReact.Component { constructor() { super() // 创建ref：this.txtRef=React.createRef() } // 获取文本框的值：getText= () => { console.log("文本框中的值：", this.txtRef.current.value); } render() { return ( <div><inputtype="text"ref={this.txtRef}/><buttononClick={this.getText}>获取文本框中的值</button></div> ) } } // 渲染：ReactDOM.render(<APP/>, document.getElementById("root"))// 导入React：importReactfrom"react"; importReactDOMfrom"react-dom"// 类组件：classAPPextendsReact.Component { constructor() { super() // 创建ref：this.txtRef=React.createRef() } // 获取文本框的值：getText= () => { console.log("文本框中的值：", this.txtRef.current.value); } render() { return ( <div><inputtype="text"ref={this.txtRef}/><buttononClick={this.getText}>获取文本框中的值</button></div> ) } } // 渲染：ReactDOM.render(<APP/>, document.getElementById("root"))
