react基础

react state和props

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

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

react 列表和keys

state：组件函数或类的成员，render一次渲染，setstate调用后值有更新才会重新调用render preps： 虚拟dom的属性，preps输出属性，html端显示输入

react组件api

基础组件View

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

组件没有默认style样式成员

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 中移除之前立刻被调用。 componentDidCatch(error, info) ，相当于的react的异常捕获（error boundaries），当一个组件错误，不会导致页面空白，这个王爷render正常显示

ref属性

获取实例值，react中获取react对象和html dom对象都通过refs访问，不要用jquery查询dom节点

props获取组件属性，ref获取组件html dom对象，state状态绑定调用render

事件机制

Touchable组件 设置是否监听,冒泡方式传递（html的子节点向根节点传递）

View.props.onStartShouldSetResponder: (evt) => true View.props.onMoveShouldSetResponder: (evt) => true

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)   //名称小写，带‘-’符号

react组件中，提倡较少的dom操作，提升效率

react route

react spa（单页应用）和传统的mpa（多页应用）通过地址跳转标签导航不同，使用route跳转页面实现单页局部刷新，route只修改地址栏不渲染

<BrowserRouter>
	<Route exact path='/' component={Home} />
    <Route path='/counter' component={Counter} />
    <Route path='/fetchdata' component={FetchData} />
</BrowserRouter>

打包

create-react-app打包或者webpack（可以打包成多页应用）打包

Redux

解耦react state状态管理，方便存储数据

dotnet new react

使用dotnet core创建react项目（需要安装create-react-app，否则执行的时候会出现ssl连接错误提示）

react和vue

react拆分html到不同的对象，封装性更好，和html很难混用，vue和html交互更方便，vue使用react的visual dom方式渲染

react ie兼容

添加react-app-polyfill模块 参考：https://blog.csdn.net/oihezz/article/details/107231226