|
================================================jsx 语法
1.1
jsx中的注释要加花括号:
例如:{//这是个注释}
1.2
jsx 中元素定义样式不能使用class 那是关键字,得使用classname
例如:return <div> <input className="mmm" /> </div>
1.3
如果在某些特殊情况要转译字符串为html 可以添加 危险属性在标签上:
原样:<li key = {index} onClick={this.handleLiClick.bind(this,index)}> {item}</li>
添加危险属性转为html :<li key = {index} dangerouslySetInnerHTML={{__html:item}} onClick={this.handleLiClick.bind(this,index)}></li>
1.4
label 标签的for 不能用,得使用 htmlFor ,因为for 是关键字
======================父子组件传值
1.
传递普通值只需要在父页面的 子组件标签上添加 自定义属性,然后 在子组件中 使用 this.props.属性 进行调用
例如:
父组件
<Mitem delfun={this.handleLiClick.bind(this,index)} index = {index} key={index} sdata ={item} />
// 点击删除
handleLiClick(index){
let listCopy = [...this.state.arr];
listCopy.splice(index,1);
this.setState({
arr:listCopy
})
}
子组件:
constructor (props){
super(props);
// 提前绑定,将函数的 this 指向控制好
// 建议所有函数之前 先声明 方便绑定this
this.del = this.del.bind(this);
}
del(){
this.props.delfun(this.props.key)
}
render(){
return <Fragment>
<li onClick={this.del} >{this.props.sdata}</li>
</Fragment>;
}
特点 以及 一些 逻辑技巧
老开发方式为:[ 命令式编程 ]
React 为 [ 声明式开发,节约DEMO ] 、
[ 可以与其他框架并存 ] 、
[ 组件式开发方式 ] 、
[ 单向数据流 ] 例如:父组件可以向子组件传值,但是子组件不可以直接修改这个值,可以调用父组件的方法修改值、
[ 视图层框架 ] 、
[ 函数式编程 ]
=============================================== props /state / render函数的关系
props /state / render函数的关系
原理:当组件的 props 或者state 发生改变的时候, render函数就会被重新执行;
========================================= React 中的 虚拟DEMO
虚拟demo 是啥:是一个JS对象,用来描述真实demo
例如拆分:
<div id="abc"><span>hellow world</span></div>
['div',{id:'abc},['span',{},'helllo world']];
之所以能提高性能:
是因为,当数据发生改变时需要替换demo ,这时候react 比较了虚拟demo 中 js对象的变化,只改变了相应的demo ,
所以节省了性能。
DoucumentFragment [存于内存中的元素 也是虚拟demo 的 载体]
|
|