循序渐进的学习react

#### 前言 其实2017年的时候已经学过一次react,由于当时学习任务紧张(vue/angular),刚学完vue还没缓过来立马就学react,比较容易迷糊.将近2年的vue工作经验后,几乎完全忘记react了,此时我又想重新学一遍. 一.react最基础的使用方法,安装. ##### 如下的demo中包含了最简单的基于react框架的网页,数据绑定 虚拟dom绑定 循环dom元素 ```

##### react组件的写法有两种, 组件的首字母必须为大写

function Header(props) {

  return (

  <div>

    <p> 这是一个头部组件__{props.name}</p>

    <span>{props.msg}</span>

</div>

)}


class Home extends React.Component {

	render() {

		return (

		<div>

			<h3>这是一个Home组件__{this.props.name}</h3>

		</div>

	)

}

####属性相关注意 1.关于input <input value= {this.state.msg}/>,这种写法不能实时输入,使用<input defaultValue= {this.state.msg} />或者绑定on-change事件. 2.获取dom相关值,定义ref跟vue一样,但读取ref略有不同,this.refs.xxx VS this.$refs.xxx; 3.父子组件传值<Header title={this.state.title}></Header>,传方法<Header run={this.run}></Header>,子组件调用父组件的方法:this.props.run,<button @click='{this.props.run}'></button> 4.子组件修改父组件的数据,父组件定义方法setmsg(msg){ this.setState({msg:msg}) };子组件在标签中执行父子间的方法<button @click='{this.props.setmsg.bind(this,"传给父组件方法的参数")}'></button>,或者在子组件方法中执行. 5.把整个父组件传给子组件<Herder Home={this}></Herder> ,在home中调用子组件header,并把父组件本身传给父组件,子组件可以随意调用父组件的方法和数据, 6.父组件获取子组件的数据和方法,给子组件定义ref.<Herder ref='herder'></Herder>,父组件获取子组件的数据:this.refs.herder.state.xxx,父组件执行子组件的方法:this.refs.herder.run() 7.生命周期函数 a.constructor(), b.componentWillMounted(), c.componentDidMounted(), d.componentWillUpdate(), e.componentDidUpdate(), f.shouldComponentUpdate(),很少用到 g.componentWillUnmounted(),componentDidUnmounted()

转载于:https://my.oschina.net/u/4053340/blog/3082999