react基础 概念 理解

作用：

前端框架，把用户界面抽象成一个个的组件，按需组合成页面

官网:

https://reactjs.org/
http://react.css88.com/

JSX：

文件: oo.js/ oo.jsx
理解1： 比喻(js + 类html) 类XML语法(json前身)
理解2： jsx是js一个数据类型

var a='<strong></strong>' 字符  var b= <strong></strong>  jsx类型

语法要求：

• 标签要闭合
• 元素必须要有一个顶层元素
• 变量首字母大写代表组件，小写对应是js数据类型 属性，小驼峰命名 tabindex -> tabIndex

精髓：

多组件组合，jsx+函数式编程（运算写成一系列的函数嵌套）

思想:

组件拆分目标: 为了复用
组件如何拆： 单一原则
状态应该给谁:

尽量给顶层组件(状态提升),->props->子组件
	可以从 props(属性) 或者 state(状态) 得到，那么它可能不应该在 state(状态) 中
	方法-》操作数据(数据|状态在哪，方法就应该在哪)

props取名： 从组件本身的角度来命名, 而不是它被使用的上下文环境

纯函数: 不会试图改变它们的输入，并且对于同样的输入,始终可以得到相同的结果,

React组件都必须是纯函数，并禁止修改其自身 props

function(a,b){不会随机，不会修改a和b的值，输出可控}

setState: 是异步的,会将多个 setState() 调用合并为一次更新,所以不能同步依赖上一个setState的值，作为下一个setState的参数

解决：

1. this.setState(function(prevState,props){})
   prevState 抓取之前this.setState的所有状态
   props 所有属性
   更新会被合并,浅合并
2. 函数节流(异步操作)
3. ev.target…

refs绑定的是dom元素,挂载完毕时才可访问