react入门

1.环境搭建

首先需要安装一下node.js，可以在官网下载，地址：https://nodejs.org/en/，此处安装的是windows版本的LTS，这个版本的是稳定版本的，大家可以根据自己的需要进行安装。 

安装之后直接在CMD命令窗里面输入：node -v 就会显示刚才安装的版本号。在安装node的时候会自动安装npm，但是我们都会选择国内的cnpm镜像，这里只需要执行以下命令便可：

npm install -g cnpm --registry=https://registry.npm.taobao.org 

完成之后便可使用cnpm来进行操作了。

以上安装完成之后，下一步就开始创建第一个React了。首先React的官方网址：https://reactjs.org/ 在CMD中执行以下命令来创建：

npx create-react-app my-react 
以上命令结束后cd my-react进入刚才创建的项目目录，再执行以下命令就会启动服务便自动跳转到浏览器进行浏览：

npm run start 

到此，我们的简单的react就完成了，而它的默认端口是3000.

 

2.框架的组件

index.js他是一个入口，首先他引入了react，帮助我们去理解App开头的组件，(大写字母开头的文件都是组件 引入的react会帮浏览器去理解)

又引入了reactdom，帮助我们将组件渲染到一个root节点上。

而App就是一个组件，她在app.js当中定义，首先，需要定义一个APP的类，她需要继承react.component.

当一个类继承了react.componet后他就是react中的一个组件，react 组件中必须有一个函数

render这个函数会return出去一个组件要显示的内容 

结尾的export default app 是将其导出 这样 在index.js中才能将他再导入进去, 导出和导入是配对使用的.

3.简单jsx语法

   什么是 jsx 语法？

   在定义的组件中：

   1.可以直接返回视图标签不报错。

   2.外层必须要有一个根标签包裹着

   3.根标签内部可以写 js 表达式，会自动编译，js 语句会报错

   4. index.js 中 render 中引用组件时，组件名写在标签符号内.

4.编写新增列表项功能

在button 标签里写一个绑定事件(onClick 非原始) 设置绑定函数(handleBtnClick)

React 避免 Dom 操作，主要是面向数据操作：

 

定义 state (组件中存放数据的地方)(construction 组件的构造函数)

super ( props )是做一些初始化工作

constructor( props ){

    super ( props );

    this.state.list [

        ......

    ]

}

然后在视图标签中的写入 { js 表达式（用 map 循环定义中的数据）} 

map函数里的第二个参数index 是数组值的下标

react要求我们返回的每一项内容都要带一个key标签 每个key的值都不能一样

 

keys 负责帮助 react跟踪列表中哪些元素被改变 添加 删除  react 利用子元素的key再比较两棵树的时候 快速得知一个元素时新的还是刚刚被移除.没有keys react也就不知道当前哪一个的item被移除了

删除功能 先复制一份数组  然后在副本里删除一个选中的下标数据

然后用副本覆盖原本的数组

5.react中组件的拆分

父组件向子组件传递参数 通过属性的形式传递参数

子组件通过props接受父组件传递过来的参数

子组件如果想和父组件通信 子组件要调用父组件传递过来的方法 

 

 

6、代码优化

1、在构造函数中做好this指向的改变

下面就不用.bind(this)

 

可以改变代码的执行性能

2、解构赋值

3、解决render函数中代码过长

7.如何使用css样式修饰

样式语法一：

标签内样式：style = {{ 键：值1，键：值2，... }}

样式语法二：

在index.js文件里引入css文件

class 属性绑定：注意标签内避免 class 关键词重复，改用 className

8.表单提交

表单元素和其他DOM元素的区别

Controlled Components - 受控组件

例：留言框

非受控组件：表单的替代技术 保存到dom，更容易集成

ref属性 接收一个回调函数 里面的参数对应着 input的节点

9.context介绍

context是什么:

Props属性是由上到下单向传递的

Context提供了在组件*享此类值的方法

Context使用:

设计目的是共享那些对于组件来说的全局的数据

不要仅仅为了避免在几个层级下的组件传递props而使用Context