react初学
Posted 5b4cn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react初学相关的知识，希望对你有一定的参考价值。
react和vue一样都是mvvm的这种开发模式。
下载js文件
引入html文件里
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script> 这三个文件必须引进来
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">这个地方script 必须加type
// ** Our code goes here! **
</script>
</body>
</html>1.模板和组件类的概念
模板：模板是return里边的东西，说白了就是DOM，放标签的地方，只能有一个顶层标签
组件类：就是自己定义的标签，首字母必须 大写
2.reactDOM.render()将模板添加到指定的容器（div）中，有时候模板东西比较多，我们可以使用组件类。
3.jsx语法：遇到html标签，该怎么写还是怎么写，js都写在{}里边，jsx只能写在模板中。外边地方还是用js语法
4.props是当前组件的组件标签身上的所有属性和子节点构成的集合。
对于组件标签的子节点，我们可以发现它是一个数组。有时候还是一个json，还会是undefined，这样对于我们遍历增加了不少麻烦。所以react自己用一个方法，可以针对这个问题进行子节点的遍历。
react.Children.map()
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
5.refs
Vue 中的refs 是模板中的所有组件标签构成的集合，必须在子组件标签上添加ref属性。
React中的refs
用于获取我们的虚拟dom的，
给你需要获取的dom节点添加ref属性，就可以通过this.refs.(ref的属性值)获取真实dom。注意 因为虚拟dom只有等到被插入文档之后才能获取，所有往往这里需要使用事件来触发。
6.react中的事件表示方式
在标签上使用驼峰法 原先的onclick 是错的 使用 onClick
事件方法的调用用{this.fn} 因为我们创建的是类 类规定将方法都写在类的内部。
7.state
State和props一样的。Props是一个静态值，一旦设定不需要改变了，往往是请求的网络地址。
State是一个状态值，这个值可以发生改变。改变这个状态值，react有自己的方法。
this.setState()
8.input
文本框在react中不能使用，传统的获取方法。使用事件源
9.钩子函数 componentDidMount()
以上是关于react初学的主要内容，如果未能解决你的问题，请参考以下文章
[React Testing] Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability(代码片段