React 学习04 - React 组件开发

组件的声明和渲染

组件的声明有两种方式：

1. 工厂函数组件（简单组件）

function MyComponent() {
    return <h2>工厂函数组件（简单组件）</h2>
}

2. ES6 类组件（复杂组件）

class MyComponent2 extends React.Component {
	// 构造函数待会用
	// constructor() {}

    render() {
    	return <h2>ES6 类组件（复杂组件）</h2>
    }
}

组件的渲染，注意：对象的名字就是组件的名字

ReactDOM.render(<MyComponent />, document.getElementById('app'))

组件的三大属性

props

props 是组件接收的参数，和 Vue 组件中的 props 概念一致。另外，React 中的组件和 Vue 一样，是可以嵌套使用的，这样就需要在组件中进行传值。同样，React 也是利用了 props 属性来进行组件传值。还有一点值得注意的是，在一个组件中，它自身的 props 只能被读取，不能被更改。
综上，React 的 props 和 Vue 中的除了语法不同，其余几乎一模一样。

编码操作

1. 读取

this.props.propertyName

2. 默认属性值

Props.defaultProps = {
	prop1： val
}

3. 传入参数
   在传参时可以使用 ES6 的解构赋值，注意：这里 p1 的属性名应该等同于 props 中的属性值

let p1 = {
	name: '张三',
	age: 18,
	sex: '男'
}

<Props {...p1} />

state

组件除了一味的接受父组件中的参数外，还需要它自身的属性，于是就有了 state。state 是组件对象中最重要的属性，被称为“状态机”，通过更新组件的 state 来更新对应的页面显示。值是对象（可以包含多个数据）。概念类似于 Vue 组件中的 data，但是 state 还可以包括方法。
注意：只要组件有状态，就不能用工厂模式声明。

编码操作

1. 初始化状态

constructor (props) {
	super(props)
	this.state = {
		state.Prop1: value1,
		state.Prop2: value2
	}
}

2. 读取某个状态值

this.state.statePropertyName

3. 更新状态 — 组件界面更新

this.setState({
	stateProp1: value1,
	stateProp2: value2
})

案例解析

描述：点击文案进行切换

class State extends React.Component {
    constructor(props) {
	    super(props)
	
	    // 初始化state
	    this.state = {
	      flag: false
	    }
	
		// 强制改变新增方法中的this指向
	    this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
    	console.log(this) // undefined
	    // 新增方法中的this指向undefined，不指向组件对象
	    const { flag } = this.state
	    this.setState({
	        flag: !flag
	    })
    }

    render() {
	    // this 指向 State
	    // 读取 state
	    const { flag } = this.state
	    return <h2 onClick={this.handleClick}>{flag ? 'true??' : 'false!!'}</h2>
    }
}

refs

refs 的作用类似于 id ，都是给标签加一个标识，方便执行操作的时候更好找到对象：

编码操作

1. 声明
   使用 refs 之前需要现在标签上声明：

<input type="text" ref={ input => this.refName = input }/>

    注意：{} 里的 input 需要是标签名

2. 使用
   在组件内，通过 this.refName 直接获取到目标对象，这里的 refName 随意取名

事件处理

React 中的事件名和 JS 原生事件名一样，但是使用小驼峰命名法来命名的，例如：

1. onclick ==> onClick
2. onchange ==> onChange