react

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/daoer_sofu/article/details/89855285

react state和props

• state用户交互可变
• props组件不变属性(defaultProps组件默认属性)

Props 验证使用propTypes（类型约束）

react 列表和keys

react组件api

• 设置状态：setState
• 替换状态：replaceState
• 设置属性：setProps
• 替换属性：replaceProps
• 强制更新：forceUpdate
• 获取DOM节点：findDOMNode
• 判断组件挂载状态：isMounted

react声明周期

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。 componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

ref属性

获取实例值

preps属性

react 虚拟dom的属性，preps输出属性，html端显示输入

state属性

组件函数或类的成员

error boundaries

相当于的react的异常捕获，当一个组件错误，不会导致页面空白，这个王爷render正常显示 componentDidCatch(error, info)

react组件

• jsx文件

class HelloMessage extends React.Component {
	render() {
		return (
			<div></div>
		)
	}
}
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

• react 函数组件

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

• js原生控件自定义，Browserify转Commonjs代码为浏览器支持格式（nodejs和浏览器全局变量不同）

class Popup extends HTMLElement 
{
	connectedCallback()    //DOM事件  document.createElement创建节点，new HTMLElement内存中，DOM是写文件
	{
	}
}
window.customElements.define('num-popup',Popup)   //名称小写，带‘-’符号