1. jsx
-
jsx 可以理解为代替template
-
需要render 来配合jsx
-
render 返回一个jsx写出来的模板
-
react 哲学：如无必要，勿增实体
-
setState是一个异步方法，原因是为了提升性能对state的更新进行批量操作，批量更新时，React 总会按照定义顺序进行浅合并，在react18之前 setState会根据所处位置情况分为同步异步，在react18之后 setState全是异步 * setState可以接受一个函数作为参数，函数可以接收到上一个状态，函数的第一个参数是上一个状态，函数的第二个参数是上一个属性 * this.setState 第二个参数也是一个函数 他是修改数据完毕的回调
-
react 提倡新的值代替老的值，而不是直接修改老的值
2. react
-
添加事件处理函数
-
event.preventDefault * 阻止事件默认传播
-
event.stopPropagation * 阻止事件传播
-
react 中的事件属于 合成事件，是对原生事件的一个包装 获取方式为 合成事件有一个参数event，通过event.nativeEvent属性 可以得到原生事件 执行时机是原生事件之后 * 优点：屏蔽了浏览器之间关于事件处理的兼容性问题 * 优点：事件委托给了document，性能的提升
-
判断：在react中 ```react
判断
{ true &&大黄展示 false &&小红隐藏 }循环
{ [1
,1
,1
,1
] 还可以通过map来生成一个新的数组 this.state.newArr.map(item=> - {item} ) }
</div>
```
6. 解决css样式模块化
- 判断this指向 * 谁调用它，this 就指向谁，首先看是不是箭头函数是的话寻找上层作用域，直至找到function，看谁调用它，this指向调用者，在非严格模式下是window，在严格模式下是undefined
3. webpack 中的代码分割
4. react 的组件
-
react中谁是子组件谁是父组件完全看你心情，不需要像vue中一样注册，父组件中通过属性传递消息给子组件，如果想要修改父组件的内容 也得通过父组件传递的函数，react中没有自定义事件都是自定义属性 * 类式组件中子组件如果想要使用父组件的传递东西需要使用this.props 父组件传递的所有东西都在这上面 * 子组件中的this是子组件的实例化对象
-
状态提升，当我们有多个组件时可以把共同的状态提升到共同的父组件中并且传递过去，所谓的状态提升指的是共同的状态提升给最近的父组件
-
context * 从react中结构出方法createContext * 创建context也就是const Context = createContext() * $$typeof:Symbol 一般都是组件 * react中大写开头的都是组件 * createContext中有两个组件需要结构出来 是 Provider 和 Consumer * Provider 组件用在父组件中，有一个属性value表示向包裹的所有后代提供内容，如果子组件想要用需要从父组件导入Consumer
js // 第一步通过createContext 创建Context 并且导出三个组件Provider Consumer XXContext // 第二部在父组件中通过Provider的value属性包裹后代提供内容 // 第三步在class组件中通过设置 static contextType = XXContext 的方法将Provider 提供的内容注入到组建的context属性上 // 第四步在函子组件中通过this.context.xxx就可以使用了,如果是函数式组件所以需要用<consumer>组件并接受一个函数的方式来使用，因为函数式组件没有this render(){ return ( <Consumer> { (value)=>{ console.log('这个value就是Provider提供的内容') return <div></div> } } </Consumer> ) }js // 第二种写法需要把其他东西拿出去才可以 export default class Father extends Component{ // 设置一条属性 static contextType = xxContext render(){ console.log() } }
