频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
对react的一些看法和见解(实例)
2018-02-13 14:16:27      个评论    来源:cyyy1223的博客  
收藏   我要投稿

渲染页面:

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>

点击复制链接 与好友分享!回本站首页
上一篇:AngularJs通过ng-class动态改变样式类代码实例操作
下一篇:html开发中功能块为单位进行程序设计的模块化解析
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站