m0_45136861的博客

React脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件化, 工程化第一步，全局安装：npm i -g create-react-app

Diffing 算法当对比两棵树时，React 首先比较两棵树的根节点。不同类型的根节点元素会有不同的形态当根节点为不同类型的元素时，React 会拆卸原有的树并且建立起新的树当卸载一棵树时，对应的 DOM 节点也会被销毁当对比两个相同类型的 React 元素时，React 会保留 DOM 节点，仅比对及更新有改变的属性key虚拟DOM中key的作用：1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生

初识生命周期class Life extends React.Component{ state = {opacity:1} death =()=>{ //卸载组件 ReactDOM.unmountComponentAtNode(document.getElementById('test')) } //组件挂载完毕 c

事件处理// 1创建组件 class Demo extends React.Component{ /* 1. 通过onXxx属性指定事件处理函数(注意大小写) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 为了更好的兼容 React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) 为了高效 2. 通过event.target得到发生事件的DOM元素对象

React组件三大属性 state props refs属性statestate 为状态通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。状态必须通过setState进行更新, 且更新是一种合并 不是替换 //1.创建类式组件 class Mycomponent extends React.Component{

引入 react库 <div id="test"> </div> <!-- 引入 react 核心库 --> <script src="/resources/react.development.js"></script> <!-- 引入 react -dom 用于支持react操作DOM --> <script src="/resources/react-dom.deve