一、React组件基本定义和使用:
注:
1、本文对所需要引入的js、HTML标签省略。
2、本文涉及到ES6语法
1、定义组件
方式一:工厂函数组件(简单组件,没有状态的组件)
function MyComponent() {
return <h2>工厂函数组件(简单组件)</h2>
}
  方式二:ES6类组件(复杂组件)
class MyComponent2 extends React.Component{
render() {
console.log(this);
return <h2>ES6类组件(复杂组件)</h2>
}
}
2、渲染组件标签
ReactDOM.render(<MyComponent />,document.getElementById('example1'))
ReactDOM.render(<MyComponent2 />,document.getElementById('example2'))
二、组件三大属性
在一中我们看下组件类MyComponent2中的this打印出的值是什么?
MyComponent2
context: {}
props: {}
refs: {}
state: null
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
_reactInternalFiber: FiberNode {tag: 2, key: null, type: ƒ, stateNode: MyComponent2, return: FiberNode, …}
_reactInternalInstance: {_processChildContext: ƒ}
isMounted: (...)
replaceState: (...)
__proto__: Component
组件三大属性1:state
需求:自定义组件,功能说明如下
1、显示h2标题,初始文本为:hey
2、点击标题更新为:o
//1、定义组件
class Like extends React.Component{
//接收的参数是固定的
constructor(props) {
super(props) //调用父类型的构造函数将props将给它
//初始化状态
this.state = {
isLike: false;
}
//将新增方法中的this强制绑定为组件对象 先得到这个方法
this.handleClick = this.handleClick.bind(this);
}
//handleClick()新添加的方法:内部的this默认不是组件对象而是undefined
handleClick() {
console.log('handleClick()',this);//this不是组件对象所以会报错
//得到状态并取反
const isLike = !this.state.isLike
//更新状态
this.setState({isLike})
}
//render()方法重写组件类的方法本来就有的
render() {
//读取状态 ES6的解构赋值
const {isLike} = this.state
//this指的是组件对象
return <h2 onClick={this.handleClick}>{isLike?'hey':'o'}</h2 >
}
}
//2、渲染组件
ReactDOM.render(<Like />,document.getElementById('example'))
重点总结:
1、状态的基本操作:初始化状态、读取状态、更新状态:
//初始化状态
constructor(props) {
super(props)
this.state = {
stateProp1:value1,
stateProp2:value2
}
}
//读取某个状态值
this.state.statePropertyName
//更新状态--->组件界面更新
this.setState({
stateProp1:value1
stateProp2:value2
})
2、如何将新增的方法强制绑定为组件对象:
this.handleClick = this.handleClick.bind(this);
组件三大属性2:props
需求:自定义用来显示一个人员信息的组件
1、姓名必须指定
2、如果性别没有指定,默认为男
3、如果年龄没有指定,默认为18
//1、定义组件
//方法一:
function Person(props){
return (
<ul>
<li>姓名:{props.name}</li>
<li>年龄:{props.age}</li>
<li>性别:{props.sex}</li>
</ul>
)
}
//方法二:
class Person extends React.Component{
render() {
return (){
<ul>
// this代表组件对象
<li>姓名:{this.props.name}</li>
<li>年龄:{this.props.age}</li>
<li>性别:{this.props.sex}</li>
</ul>
}
}
}
//指定属性默认值
Person.defaultProps = {
sex:'男',
age:'18'
}
//指定属性值的类型和必要性
Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number
}
//2、渲染组件标签
const p1 = {
name:'Tom',
age:'23',
sex:'女'
}
//...的作用
//1、打包
//function fn(...){} fn(1,2,3)
//2 、解包
//const arr1 = [1,2,3] const arr2 = [6,...arr1,9] 拆数组
ReactDOM.render(<Person {...p1} />,document.getElementById('example1')) //拆对象{...p1}
const p2 = {
name:'JACK';
}
ReactDOM.render(<Person name={p2.name} age={18} />,document.getElementById('example2'))
组件三大属性3:refs
需求:自定义组件,功能说明如下:
1、点击按钮,提示第一个输入框的值
2、当第二个输入框失去焦点时,提示这个输入框的值
//1、定义组件
class MyComponent extends React.Component{
//初始化状态
constructor(props) {
super(props)
this.showInput = this.showInput.bind(this);
this.handleBlur= this.handleBlur.bind(this);
}
showInput() {
const input = this.refs.content
alert(this.input.value);
}
handleBlur(event){
alert(event.target.value);
}
render(){
return(
<div>
<input type="text" ref={input => this.input = input }/>//this表示组件对象
<button onClick={this.showInput}>提示输入</button>
<input type="text" placeholder="失去焦点提示内容" onBlur = {this.handleBlur} />
</div>
)
}
}
//2、渲染组件标签
ReactDOM.render(<MyComponent />,document.getElementById('example'))
重点总结:
1、refs
2、事件处理