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只修改地址栏不渲染
代码语言：javascript复制<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
