关于React

 

1.模板和组件类的概念

模板：每个组件都有一个自己的模板，每个模板使用自己组件里的数据。

组件类：自己定义的标签，不能使用H5标签，首字母必须是大写。

二者关系：

2.ReactDOM.render()将模板添加到指定的容器中去，有时候模板的东西比较多，我们可以使用组件类。

3.React网页源码结构大致如下

注意点：

1.script标签type类型为text/babel。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

2.上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

4.JSX语法

遇到html标签，html中该怎么写这里就怎么写，js都写在{ }里，jsx写在模板中

5.props是当前组件的组件标签身上的所有属性和子节点构成的集合。

this.props.children组件的所有子节点

对于组件标签的子节点，它可能是一个json，或者是arry，或者是undefined。

react有一个自己的方法，专门zhendui组件标签的子节点的遍历React.Children.map()

6.refs

vue中refs是模板中所有组件标签构成的集合，必须在子组件标签上的添加ref属性

react中refs用于获取虚拟dom

如何获取真实的dom节点：

给你需要获取的dom节点添加ref属性，就可以通过this.refs获取真实dom。

注意：因为虚拟dom只有等到被插入文档之后才能获取，所以往往这里需要使用事件来触发。

7.react中的事件表示方式

在标签上使用驼峰法  如onclick要写成onClick

事件方法的调用用{this.fn}因为我们创建的是类 类规定将方法都写在类的内部

8.state

state和props：props是一个静态值，一旦设定了就不需要改变了，往往是请求的网络地址

                        state是一个状态值，这个值可以发生改变，改变这个状态值，用this.setState()

9.input

文本框在react中不能使用传统的获取方法。

文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况。

10.钩子函数componentDidMount()

 

组件的style属性的设置方式也值得注意，不能写成

style="opacity:{this.state.opacity};"

而要写成

style={{opacity: this.state.opacity}}

ajax：

 也可以使用jquery完成ajax请求

 

11.create-react-app环境搭建

图片路径书写

错误方式：用相对路径写不对

 正确方式：

 

class问题

不能使用class=“App”，要写成className=“App”

react的服务

我们在public中放了一张图片，我们会发现在地址上输http://localhost:3000/02.jpg 能找到我们指定的图片。说明了react把public当成该项目的web容器。 以后做项目时资源放在public中。

 

只要使用ajax和钩子 路径就要相对index.html，所以资源需要放在public下，为什么放？

因为public是静态资源。

 

设置状态值 props  state

组件类的创建方法

第一 React.createClass()  最开始的方法

第二 class Heads extend Component{}

第三 构造函数

用es6 设置状态值的时候

设置state

 

设置props

事件

 

 

react react-router

React路由

React推了两个版本 一个是react-router 一个是react-router-dom

个人建议使用第二个 因为他多了一个Link组件

 npm install react-router-dom

 

第一种方式的用法

第二种方式的用法

 

路由嵌套

路由传参