React入门学习笔记

React 基础 组件

1.创建的类需要在别的类中使用，则建立的时候需要添加export default ，另外return里面只能有一个节点，下图就是一个简单的组件

组件的创建

2.使用时以标签的形式使用，并以导包的方式引入进来即可(组件的使用)

组件的使用

3.组件也可以通过参数的方式传递使用

以参数的方式传递

4.同样的，react中也可以使用三目表达式

三目表达式

5.组件中参数传递不在需要单引号，直接{}就可以

参数传递

5.组件中注释，当使用 “//注释”时html上也会显示这个注释内容，但页面上并不会显示，当使用“{/* 注释 */}”注释时，html和页面都不会显示这个注释。

6.组件的生命周期

React生命周期

componentWillMount()：页面将要加载之前会先走这个函数，可以在这个函数里面加载一些页面的数据，以及实现一些逻辑等等。

componentDidMount()：页面加载之后会走这个函数。

React属性与事件

1.constructor构造方法： 

            在一个类中只能有一个名为 “constructor” 的特殊方法。 一个类中出现多次构造函数 (constructor)方法将会抛出一个 SyntaxError 错误。在一个构造方法中可以使用super关键字来调用一个父类的构造方法。如果没有显式指定构造方法，则会添加默认的 constructor 方法。如果不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。

constructor解释

React中使用constructor构造方法更改 state 的时候会立即引起值得变更，但不会刷新整个页面，效率非常的高，而且不会影响其他组件的state的值，只影响本身。state对于模块来说属于自身的属性。

4秒之后更改页面的值，会刷新页面，但是不会刷新整个页面的值，只会恒爱state中的值

2.React之props属性：组件之间进行传值，对于模块属于外来的属性

向BodyIndex中传值

BodyIndex中使用props接受值

3.事件与数据的双向绑定

     事件的绑定

    点击"提交"按钮之后年龄会由原来20，改为50

点击更改年龄

当然也可以在绑定的时候传一个值过去，这样点击"提交"按钮之后年龄会由原来的20变为99

点击传值

子页面向父页面传递参数的方法

在子页面中通过调用父页面传过来的事件 props 进行组件的参数传递，通过onChange获取子页面输入的值，父组件中绑定并接受子组件传过来的值，并更改父组件中的值。

时随着输入框的输入值实时触发 onChange 事件，从而实时更新 p 中的值

子类组件

父类组件

4.可复用组件

当父组件给子组件传的值不是一个数字时，则会报错，子组件中添加了一个约束，使子组件只接收所有父组件传过来的数字类型，其他都不接收。

父组件

子组件中规定userid的类型为数字类型  

如果number后面加一个 ".isRequired "则父组件引用子组件必须要传这个参数，如果添加上

"BodyIndex.defaultProps = defaultProps; "这个约束，那么当父组件没有传username这个值时则会给他一个默认值，就是上图中的 defaultProps。

如果说父传子属性 子在传子属性 书写方法 "{...this.props} id={4}","...this.props"是拿到所有的参数，"id={4}"是又另外传了一个值过去。

5.组件的refs

当使用ref时，使用 this.refs.submitButton.style.color = 'red' 可以直接更改input中的颜色

ref

Refs 是访问到组件内部 DOM 节点唯一可靠的方法

Refs 会自动摧毁对子组件的引用

不要在 render 或 render 之前对 Refs 进行调用

不要滥用 Refs

React 样式

1.内联样式

其中的header只会影响本类，不会对其他的类进行污染

样式需要使用驼峰写法属性也是需要引起来，如果样式要使用html中的则也需要用引号引起来

注意标签中给他一个class属性需要改为className否则会与react中的class冲突

缺点是动画、伪类（hover）等不能使用

内联样式

2.内联样式中的表达式

当前 padding-top 和 paddingBottom 的高度为15px，当触发了点击事件之后会给minHeader的值取反，这样他们的值为3px，样式会实时更改，不用刷新页面

实时改变样式

3.CSS 模块化

css文件可以以require的方式导入进来，在下面直引用即可

这里可以使用 class 是因为使用了一个插件 "babel-plugin-react-html-attrs"

footer.css只会影响引入的类，不会影响其他的类

使用的插件

css模块化

React Router 路由

1.Router 基础

首先需要引入路由，并把程序的入口改为

其中的 "/" 和 "list" 是平级的，都是一个单独的页面

而其中的 "details" 为嵌套路由，"details"不是一个单独的页面，他会显示在他所嵌套的路由的页面上，而在路由上只要简单的使用this.props.children即可引用子路由

路由

引用子路由

2.参数传递

参数传递时可以通过 "list/123" 写死，也可以通过 "list/:id" 的方式占位，页面url上拼上就可以

而在对应的页面上只需要使用 "this.props.params.id" 就可以接收到url上的值

参数传递

页面接收参数