对react的一些看法和见解（实例）

渲染页面：

react中将功能分割成组件，只关注组件状态(state,props)的变化。所有的操作都是在虚拟dom上,每当组件状态发生变化就生成新的dom数据，然后将上一次的dom跟本次dom进行比较，只将变化的部分更新到真实的dom上。

props和state的区别

state可以用来与用户交互，通过setState({})来更新和修改数据

父子组件的数据传递通过props传递，数据是单向传递的，自顶向下，不要尝试改变props

1.父组件->子组件 通过<Parent title={值}/> Children中通过this.props.title获取

2.子组件->父组件 仍是通过props传递，但传递的是函数，子组件调用该函数即可

生命周期

componentDidMount() 只执行一次，发生在组件已经插入到真实dom中，一般fetch请求写在该方法

componentWillReceiveProps(nextProps) props改变便执行

{某方法}

其中方法中不能使用this.props否则还是获取的上一次数据

注意当props未发生变化时也可能会执行该方法

可在nextProps!==this.props判断里使用该方法

若使用componentWillUpdate等生命周期函数可能会不断执行该方法原因是（在这个方法中你不可以使用setState,否则会触发一轮新的渲染，不断调用componentWillUpdate,陷入无限循环）

该方法通常用在props改变时

this

在react中使用类来声明组件

class 类名 extends React.Component

{  constructor(props){super(props);}

   handleClick(){};

   render(){return <button onClick={this.handleClick}}

}

在react中使用jsx语法所以所有的事件如click，blur首字母大写，

获取this的指向

1.方法若采用类方法，在constructor中写this.handleClick=this.handleClick.bind(this)或者在回调中

onClick={this.handleClick.bind(this)}或onClick={()=>this.handleClick()}

2.方法也可写成箭头函数形式即可，handleClick=()=>{}

方法传参

1.若使用箭头函数写方法，调用时this.方法即可不能写成this.方法()否则页面渲染时就会调用该方法

this.函数.bind(this,参数)

()=>this.函数(参数)

react之jsx语法

1.render中最外层只能有一个HTML标签包裹

2.表达式要用{}包裹

3.react设置组件样式

1.内联

<p style={{color:"gray"}}></p>

2.选择器

const pStyle={color:"gray"}

<p style={pStyle}></p>

3.对象

.pStyle{color:"gray"}

<p className="pStyle"></p>