coderwhy课程笔记（4）

react组件中的数据，可以分成两类。1. 参与界面更新的数据：当数据变化时，需要更新组件渲染的内容；2. 不参与界面更新的数据：数据变化时不需要更新组件渲染的内容。

参与界面更新的数据，需要放到this.state对象里面。使用this.setState({}), 可以更新数据并重新渲染。使用类组件的时候，需要在构造函数里对方法的this进行绑定，或者绑定事件的时候对this进行绑定。this.modifyText = this.modifyText.bind(this) onClick={this.modifyText.bind(this)}

jsx只能有一个根标签；通常会包裹一个(), 实现换行；jsx里可以是单标签也可以是双标签，但是单标签必须以/>结尾（与html不同）。jsx里的注释： {/* 注释 */}

jsx里的变量：1. number/string/array, 类型，直接展示 2. null/undefined/Boolean 类型，显示为空（需要转成字符串才能显示）3. Object类型不能直接展示，页面会报错

jsx里嵌入表达式：运算表达式、三元运算符、执行一个处理函数。

jsx里绑定class属性：写成class=xxx的话，可以识别，但是会报warning, 要写成className。绑定样式：<div style={{ color: "red" }}>div</div>

React里绑定事件：直接写在jsx元素里，事件命名采用小驼峰，通过{}传入一个事件处理函数。

this的四种绑定规则：

1. 默认绑定 独立执行foo()
2. 隐式绑定 被一个对象执行obj.foo() => obj
3. 显示绑定 call/apply/bind
4. new 绑定： new Foo() => 创建一个新的对象，并赋值给this

React绑定的事件函数，为什么默认this为undefined:

这个过程相当于：

const obj = {
    foo: function() {
        console.log("foo:", this)
    }
}

const config = { onClick: obj.foo }
const click = config.onClick

click() //此时this是undefined（严格模式）

处理这个undefined, 除了使用bind this之外，还可以采用ES6 class fields:

btn2Click = () => {
    console.log(this);
}
<button onClick={this.btn2Click}>按钮</button>

原理是，箭头函数没有this, 调用的时候会去寻找上层作用域的this, 这里正好是组件实例。

第三种方法：传入箭头函数

<button onClick={()=>this.btn3Click()}>按钮</button>

原理是，调用this.btn3Click()的时候，触发了隐式this // 最常用的一种方式。

参数传递：推荐箭头函数，不推荐bind

1. event: <button onClick={(event) => this.btnClick(event)}>点击</button>
2. 其他参数：<button onClick={(event) => this.btnClick(event, name, age)}>点击</button>

react中条件渲染的几种写法： 1. 根据不同的state值来定义不同的jsx变量 2. 使用三元运算符 3. 使用逻辑与/逻辑或 运算符 4. 可选链