React基础（1）

function App() { const num=100; return ( 
 hello {/* 大括号语法使用 */} {/* 1.使用引号输出字符串 */} {\'我是一串字符串\'} {/* 方法的调用 */} {new Date().getTime()} {/* 变量的输出 */} {num} {/* 使用js对象 */} {/* 外层的大括号是一个识别的作用 可以忽略 */} <div style={{color:\'red\'}}>nihoa
 {/* if switch 变量声明 不能出现在大括号里 只有表达式才能出现在大括号里面 */} 

     从上面的栗子我们可以看到 jsx中的html一般写在return返回部分 而逻辑结构一般写在函数里面 这就是React的函数式编程（当然也有类组件） 在return的部分 我们可以使用大括号“{}”语法来输出一些简单的表达式（只有表达式可以被大括号识别并输出 但是对于if,switch等“语句“来说是不能被输出的！！！

二，其他语法应用

（1）jsx实现列表渲染

这里我们需要使用数组的map方法 

const list=[{id:1,name:\'1\'},{id:2,name:\'2\'},{id:3,name:\'3\'}]function App(){ return ( 
 
 {/* 这里在li标签里面的key属性是用来做标记的 提升React的渲染性能 */} {list.map(item=>
id:{item.id},name:{item.name}
)} 
 
 )}export default App

需要注意的是这里 li 标签有一个key属性 这个key就是li的id 可以提升React的运行速度。

（2）jsx实现条件渲染

这里的条件分为复杂条件（就是多条件）和简单条件（两个条件以下） 

1.简单条件

我们可以使用&&（逻辑运算符）或是三元运算符来解决 来看看栗子

const islogin=true;function App(){ return( // 如果逻辑控制是单一控制就使用&&运算符 // 如果多逻辑控制是同三元运算符 
 {islogin&&已登录} {islogin?已登录:未登录} 
 )}export default App

原理很简单哈就不说了

2,复杂条件

就是三个或三个以上条件的 我们可以使用switch或是if来解决 先写一个判断函数 然后利用大括号输出函数就行

//使用自定义函数与if语句来处理复杂情况下的渲染const articleType=1;function getArticleType(){ if(articleType===1){ return 
普通文章
; }else if(articleType===2){ return 
无图文章
; }else{ return 
未知文章类型
; }}function App(){ return( 
 {getArticleType()} 
 )}export default App

三，事件绑定

事件绑定也分为几个类型哈 1.不需要参数 不需要事件对象 2.需要参数 3.需要参数和事件对象

（1）不需要参数事件

这一类很简单 就是在标签上加上onClick属性 里面加上自己设置的事件函数

function App(){ function handleClick(){ console.log(10) } return( 
 点击 
 )}

这就是最简单的事件绑定

(2) 需要参数或者需要事件对象

1.需要参数的

function App(){ function handleClick(name){ console.log(name) } return( 
 handleClick(name)}>点击 
 )}

2.需要事件对象的

function App(){ function handleClick(e){ console.log(e) } return( 
 handleClick()}>点击 
 )}

(3)两者都需要的

import React, { useState } from \'react\';function App() { const [count, setCount] = useState(0); function handleClick(name,e) { setCount(count + 1); console.log(e); console.log(name); } return ( 
 handleClick(can,e)}>  
 );}export default App;

 只要在用的时候记住这几种形式就基本不会出错了，我们直接来看useState内容

四，useState

这个hook（钩子api）是React交互的核心 用来控制状态变量改变页面的刷新状态的，也就是数据驱动视图

1.基本使用

先引入useState这个钩子（一般会自动引入）直接来看一下怎么使用吧

// useState 就是一个控制状态变量的开关 状态变量可以通过useState来影响页面的渲染//数据驱动视图import React, { useState } from \"react\";function App(){ //count 状态变量 //setCount 修改count状态变量的函数 const[count,setCount]=useState(0); //尽量吧一个组件函数的事件函数写在一个组件函数中 function handleClick(){ setCount(count+1); } return( 点击{count} )}export default App;

当我点击按钮之后该组件都会刷新 这给我们造成了一种错觉就是count是在自增的 其实并不是哈 这里的count相当于是一个只读属性的常量他是不会自增的，在React中状态默认是只读的 我们看到的状态改变是页面重新刷新后重新对状态变量的赋值 但为刷新的情况的状态默认是常量。

2.修改复杂数据类型的方法

上个栗子里面我们使用了setcount去修改一个简单数据类型 但是对于对象等复杂数据类型想去修改就要在set函数中设置一个新的对象，来看栗子

import React, { useState } from \"react\";// 复杂数据类型的修改方法function App(){ const[obj,setObj]=useState({ name:\'张三\', age:18 }); function handleClick(){ //使用setObj方法传入一个全新的对象 setObj( { ...obj, name:\'李四\' } ) document.write(obj.name+obj.age); } return( 点击 )}export default App;

这就是今天的学习记录哈，谢谢诸位指出错误