React 学习04 - React 组件开发

组件的声明和渲染

组件的声明有两种方式:

  1. 工厂函数组件(简单组件)
function MyComponent() {
     
    return <h2>工厂函数组件(简单组件)</h2>
}
  1. 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
  1. 默认属性值
Props.defaultProps = {
     
	prop1: val
}
  1. 传入参数
    在传参时可以使用 ES6 的解构赋值,注意:这里 p1 的属性名应该等同于 props 中的属性值
let p1 = {
     
	name: '张三',
	age: 18,
	sex: '男'
}

<Props {
     ...p1} />

state

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

编码操作
  1. 初始化状态
constructor (props) {
     
	super(props)
	this.state = {
     
		state.Prop1: value1,
		state.Prop2: value2
	}
}
  1. 读取某个状态值
this.state.statePropertyName
  1. 更新状态 — 组件界面更新
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 需要是标签名

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

事件处理

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

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

你可能感兴趣的:(React)