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中不能使用,传统的获取方法。使用事件源
|