react学习笔记

学习链接：https://react.docschina.org/docs/getting-started.html

jsx:js和html混写的方式

render里return的代码，必须用一个根节点包起来，这个跟vue是一样的

image.png

jsx里：
不要用for，用htmlFor；不要用class，用className

image.png

父子组件传值：
跟vue类似，父组件定义一个属性，子组件用props接受

react表达式跟vue表达式类似，可以放简单的运算、三元表达式

注释格式：{/注释.../}，注意外面要套一层大括号

jsx设置点击事件：
方法1：

div1

方法2：
function click_e(){
console.log('div1被点击了');
}
ReactDOM.render(

div1

,
document.getElementById('app')
);

问：点击时如何获取event对象？
答：
function Action_link(e){
console.log('e', e);
e.preventDefault();
}
ReactDOM.render(

点我

,
document.getElementById('app')
);
不过，上面这种方式获得的event，跟原生js的event有点区别

问：如何实现父子组件？
答：
1.引入：
import 组件名称 from '组件地址';
2.使用：
<组件名称 />

问：如何遍历数组？
答：
import React,{Component} from 'react';
let list=[
{
name:"百度",
address:"http://www.baidu.com"
},
{
name:"google",
address:"http://www.google.cn"
}
];
class Home extends Component{
render(){
//定义一个数组，将数据存入数组
const elements=[];
list.forEach((item)=>{
elements.push(

{item.name} 
{item.address}

)
});
return(

{elements}

)
}
}
export default Home;

问：如何跳转路由？
答：
路由跳转：
import React,{Component} from 'react';
class Home extends Component{
to_login(){
this.props.history.push('/login');
}
render(){
return(

我是div

)
}
}
export default Home;

image.png

image.png

页面里的onClick不能用函数名()【如果这样写，页面一进来就调用函数了】，这个跟vue的methods的@click不一样，跟html里的onclick也不一样

问：为什么使用虚拟DOM？
答：虚拟DOM就是js的对象，使用虚拟DOM的原因是：修改js的对象比修改真实DOM的成本更低

问：如何在react项目里引入css？
答：
js文件：
import styles from './IndexPage.css';
function IndexPage() {
return (

如果清除缓存，页面仍然看到的是以前的效果，可以把项目重新运行一下

constructor里不要使用setState，如果使用了setState，会报错如下：

image.png

问：jsx里不能使用if语句，怎么办？
答：可以使用替代方案，比如使用三元表达式、函数等方式实现需求

问：如何理解下面这段话？

image.png

答：看我下面的代码，如果直接把input写的内容渲染到页面里的话，可能就会变成标签，这是有危险的

image.png

这是jsx的情况，