Recat

Recat使用

1.安装脚手架工具

npm install -g create-react-app   /  cnpm install -g create-react-app

2.创建项目

create-react-app 项目名

 

切换到项目目录  npm run start 启动项目

 

元素渲染

JSX元素对象只可以有一个根节点 （类似VUE）

渲染过程 为 ReactDOM.render(模板,根节点)

 

 

Jsx

优点：

1.JSX执行更快，编译为JS代码进行优化

２.类型更安全，编译过程如果出错不再编译，及时发现错误

3.JSX编写更加简单快捷(不和VUE比)

注意:

1.JSX 必须有根节点

2.正常的普通的HTML元素要小写，如果大写，默认为组件

 

JSX表达式

1.由HTML元素构成

2.中间如果需要插入变量用  {}

3.{ }之间可以用表达式

4.{ }中间表达式可以混合使用JSX对象

5.属性和HTML内容一样用()来插入内容

 

 

JSX style样式

1.class中不能合并多个class属性

l例：class =' abc'  class ='active'

2.只能使用JSX对象的新形式 {} 添加样式  不能通过"样式"方式添加

3.style样式中，如存在多个单词的属性组合，第二个单词开始，首字母大写（驼峰命名法） 或 使用引号

例:backGroundColor   borderBottom

4.多个类共存的操作

<h1 className= {  "abc" + classStr(JSX对象，设置的类名样式) }> helloword </h1>

或使用拼接字符串的形式

let classStr = [ ' abc' , '  reg' ].join("  ")

<h1 className= { classStr }> helloword </h1>

 

React 组件

1.函数式组件

function  组件名() {

    return(   //模板内容  )

}

 

2.类式组件

class 组件名 extends Recat.component {   

         consturtor( props ){

               super( props)  }

        render() {  // 要渲染的模块  }

}

//传递参数的过程为  渲染时   < 组件名 参数名 = '  值 '>

3.混合型组件 

可在渲染过程中渲染其他组件 

 

函数式组件和类组件的区别：

函数式组件 比较简单，一般用于静态没有交互事件内容的组件页面

类组件 一般称为动态组件，一般用在有交互或者数据有修改的操作

 

 

React 状态

class 组件名 extends Recat.component {   

         consturtor( props ){

               super( props)

              this.State={  值名：值 }

         this.交互方法名 = this.交互方法名.bind(this)   //定义后方法必须更改this指向 才能使用

         //或使用箭头函数的形式  

}   

      //可声明一些交互方法  但注意声明后 要对定义后的交互方法 进行 this指向的更改

        render() {  // 要渲染的模块  }

     交互方法 =() => {    }

}

 修改State中的数据

componentDidMount(  )   {   //生命周期函数   组件渲染完成时的函数

          this.setState{ 值名 : 值}

  }

 

 

React 父传子数据传递

使用State去控制子元素props的从而达到父元素数据传递给子元素

 

React 子传父数据传递

字传父的过程为  

父组件定义方法  方法携带setState数据   通过渲染时传递方法

子组件通过this.props.方法名   接收方法  并将要传递的值 赋值给父组件传递过来的方法

 

React事件

特点：

1.React事件 绑定事件命名：采用驼峰命名法(第二个单词开始首字母大写)   原生写法:小写

2.{  this.函数名 }传入一个函数   原生写法:  “ ”  事件方法通过字符串进行绑定

 

React事件对象

React返回的事件对象是代理的原生的事件对象，如果想查看事件对象的具体值，必须输出具体事件对象的属性

 

原生：阻止默认行为时，可以直接返回 return false

React中，阻止默认行为必须采用 e.preventDefault()

 

React事件函数传递参数

使用ES6箭头函数传递多个参数

< button onClick = { (e )=>{ this.函数名 (  ' 参数值' ,'参数值',事件对象e )}}>  

//通过ES6箭头函数(外部this) 调用函数携带参数 接收时对应参数即可

使用匿名函数传递多个参数

< button onClick = { function(e){ this.函数名 (  ' 参数值' ,'参数值',事件对象e )}.bind(this)}>

//使用匿名函数 通过匿名函数声明 传递多个值并指定this指向 

 

React条件渲染

1.直接通过条件运算返回要渲染的JSX对象 (if..else,三元运算符)

2.通过条件运算得出JSX对象，再将JSX对象渲染到模板中

 

列表渲染

具体实现:

将列表内容拼装成数组放置到模板中

将数据拼装成JSX数组对象 例:[ <li>xx</li>, <li>xx</li>, <li>xx</li>]

 

1.可以使用数组 map方法 循环遍历数组，对每一项数据按照JSX的形式进行加工，最终得到1个每一项都是JSX对象的数组，在将数组渲染到模板中  key值需要放置到每一项中  即li中

例：

 

如 渲染过程复杂 ，可通过封装函数 进行调用 但是要记住  key键建立在函数中

2.可以根据for循环 遍历数组长度，将遍历好整理好的JSX对象进行新数组的组合，然后进行渲染