aliven1的博客

将子节点渲染到父组件意外的任何地方，优势：1.结构上父子节点解耦；2.逻辑上，父组件仍然能触发该子节点的冒泡。

在使用Mouse组件的时候，通过一个render属性，传递一个可用组件Cat给父组件Mouse，而在Mouse组件中，可以将本身的state对象传递给Cat组件，Cat组件中的mouse属性的值与Mouse父组件中的state相同。精简来说: 就是父组件可以将自己的state传递给子组件，而子组件可以根据父组件的state对象，来进行render。这样做的好处是：（1）不用担心props的命名问题（2）可以溯源，子组件的props一定是来自于直接父组件（3）是动态构建的。<Mouse re

react中渲染传入的组件，类似vue中的钩子eg:A组件在调用过程中，通过传入的属性render(render这个属性可以是其它名字，值是一个函数，函数返回值是动态组件，动态组件可以使用A组件中的数据)...

引入多个css文件，通过逻辑切换使用不同的css文件

1.package中配置单一代理向3000发的请求会代理到5000，但是如果3000对应的路由本地能找到资源，就不走代理接口5000了(3000是本地dev-server开启的服务，会先找本地资源，找不到再走代理接口)2.配置多个代理创建setupProxy.js文件...

1.setState修改state中的初始化状态2.调用this.forceUpdate方法，强制刷新界面 调用this.forceUpdate函数之后，触发的钩子函数从componentWillUpdate开始，因为跳过了shouldComponentUpdate，所以shouldComponentUpdate不会生效3.父组件触发render...

1.react只有在17.0之后的版本，才会有这个钩子函数2.getSnapshotBeforeUpdate钩子函数，必须有返回值：【null/others】,componentDidUpdate接收返回值3.getSnapshotBeforeUpdate使用场景：容器动态添加数据，出现滚动条 ，固定内容的位置为上次浏览的位置，计算scrollTop的高度...

npm install reconnecting-websocket --saveimport ReconnectingWebSocket from "reconnecting-websocket";testWebsocket=()=>{ let url = `ws://11.11.11.11:8000/market_info/` const data={test:"test"} const rws=new ReconnectingWebSocket(url,[],{}

getDerivedStateFromError1.必须有return,state中标记这个错误，并根据这个错误编辑，决定渲染哪个页面componentDidCatch1.只捕获钩子函数中的错误

一、什么是useRef const refContainer = useRef(initialValue);1 返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )。返回的 ref 对象在组件的整个生命周期内保持不变当更新 current 值时并不会 re-render ，这是与 useState 不同的地方更新 useRef 是 side effect (副作用)，所以一般写在 useEffect 或 event handler 里us

根据不同运行环境，使用不同的配置1.安装dotenv-cli：npm install dotenv-cli -g2.项目根目录添加.env.pre文件，写入环境变量：dotenv 可将环境变量从 .env 文件加载到 process.env中REACT_APP_TITLE=''TEST'3.修改package.json文件"start:test": "dotenv -e .env.pre react-app-rewired start"环境变量中写入REACT_APP_TITLE=’‘

使用的组件是Picker提示弹出层缺少key,给数据源中的div加上key就好了，官方文档的示例中并没有加keyPickerWrapper.defaultProps={ colorValue:['#00FF00'], colors:[ { label: (<div key="#FF0000"> <span style={{ ...colorStyle, backgroundColor: '#FF0000' }

class OuterClickExample extends PureComponent { constructor(props) { super(props); this.state = { isOpen: false }; this.timeOutId = null; this.onClickHandler = this.onClickHandler.bind(this); this.onBlu

以react组件为例containsjs原生方法，用于判断DOM元素的包含关系。如果A元素包含B元素，则返回true，否则false。唯一不支持这个方法的是IE的死对头firefox。不过火狐支持compareDocumentPosition() 方法class OuterClickExample extends PureComponent { // state = { // isOpen: false, // toggleContainer : React.cr

1. setStatesetState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback])------函数式的setSta

路由组件传参编程式导航

开发环境dev-server和测试接口的本地node服务会存在跨域问题，所以要配置代理服务

1. 卸载组件2. 旧版本生命周期钩子a) setState调用之后，会触发钩子sholdComponentUpdate（默认返回true，是控制组件更新的开关）。如果sholdComponentUpdate返回值是false;则render函数不会触发b)forceUpdate:没有改变state中的状态，也能更新c) componentWillReceiveProps:第一次给组件传值的时候不会调用这个钩子，只有在值发生改变的时候（newProps），才会触发这个钩子函数d) 常用的钩子

高阶函数：符合下面一条就是高阶函数：promise,setTimeout,array.map()等等若A函数，接收的参数是一个函数，就称A为高阶函数若A函数，执行完成返回一个函数，就称A为高阶函数分析：1.onChange绑定执行函数，加了括号，表达式会立即执行，onChange绑定的是函数执行的返回值，所以onchange执行的函数通过return 返回。参数传递到函数体，因为形成了闭包，驻留内存函数的柯里化：通过函数调用继续返回函数的形式，实现多次接收参数，最后统一处理的函数编码形式。

componentWillReceiveProps的执行条件

README.md:通过markdown写的一些项目介绍

使用解构赋值，直接拿到Fragment组件，可以直接用Fragment代替React.Fragment

1.行内样式：2.外联样式，标签加样式类，用className,后面是类名： 2.在入口处引入css文件：

1.函数中this指向的绑定：函数this指向当前组件，在constructor中绑定一次之后，不用每次调用的时候重新绑定2.使用结构赋值，删除下面的delete行：