Skip to main content

react 总结

· 3 min read
Scott

react核心思想​

通过数据操作dom，数据改变 dom会重新render；所以我们的侧重点是修改数据（修改数据要用到setState）

原则：immutable原则，不能直接修改state，要先copy一下

事件​

事件名称首字母大写，eg: html 中 on-click => react: onClick

构造函数​

构造函数是最先被执行的，所有this的绑定在这里执行可以节约性能

构造函数默认接受props，下面是固定写法

constructor(props) {
  super(props)
}

jsx语法​

凡事js出现html都要引入"react"

注释

{}放的是js，注释可以放在里面

style={{color:'red',fontSize:12px}} => 外层{}是放js的, 内层{}是一个js对象

渲染的时候不转义，虽然有可能被注入恶意代码，但是我们有这个需求：

<ul>
   {
        this.state.list.map((item,index)=>{
              return <li key={index} dangerouslySetInnerHTML={__html: item}></li>
       })
   }
</ul>

可以看到所有html中套js {}最终返回的只是html/组件

属性冲突​

  • label标签里的for => htmlFor
  • 普通标签的class => className

es6语法​

return 可以简写成()；只有一行的话，return是可以省略的

对象赋值:

const name = this.props.name;
const age = this.props.age;

//等效于
const {name, age} = this.props;

复制／拷贝: 

var list = ["apple","pear","orange"]
var another = [...list] //把list中的元素一一展开，再用[]包裹成array

对象属性中，如果key字符串和value对应的变量名同名，可以简写，如下：

const list = [...this.state.list,"apple"]

this.setState({
    list,
    inputValue: ""
})

state​

只要是react组件即class 无论是是在jsx语法中还是在其他函数中 要访问state属性 必须是 this.state.xxx

组件间传值​

传值：父组件可以通过添加属性的方式向子组件中传递任何属性和方法（方法需要绑定父组件this,bind还可以接受参数,一般为索引index）

接收： 子组件通过this.props.xxx接收