记录学习react

一、react是什么

react是一个用于构建用户界面的 JavaScript 库

二、怎么用

2.1. 安装脚手架

​
npm i create-react-app -g

​

2.2. 创建项目

create-react-app 项目名

2.3. 启动项目

npm start

二、元素渲染

文本渲染

const str = "hello world"
function App() {
  return (<div>
    <p>{str}</p>
    <p>{3 - 1}</p>
    <p>{str.split('').reverse().join('')}</p>
  </div>)
}
export default App;

html渲染  

import './App.css';
 
const stl = {
	fontSize:'24px',
	color:'red'
}
function App(){
	return (<div>
	<h1 className='myh'>我是张三</h1>
	{<p style={stl}>我会变色</p>}
	</div>)
}
export default App;

三、条件渲染 

 && 与三目运算符

const str = '给我爱吃的喜之郎';
const msg = '还是<strong>html</strong>简单';
const score = 80;
let flag = true;
const list = ['react','vue','angular','jQuery'];
function App(){
	return (
	<div>
	<h1>长大我想当太空人</h1>
	<p>爷爷奶奶可高兴了</p>
	<p>{str}</p>
	<p>{2+3}</p>
	<p>{str.length}</p>
	<p>{str.split('').reverse().join('')}</p>
	<p>条件渲染</p>
	<p dangerouslySetInnerHTML={{__html:msg}}></p>
	<p>条件渲染</p>
	{score>=60?'及格':'再学一遍'}
	{flag&&<p>啊这</p>}
	<p>列表渲染</p>
	{list.map((item,index)=><h3 key={index}>{item}</h3>)}
	</div>)
}
export default App;

如果条件是 true ，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

四、列表渲染

import './App.css';
 
const arr = [
	<p key='a'>我直接坐飞机去你的坟头</p>,
	<p key='b'>疯狂的偷吃你的贡品</p>,
	<h1 key='c'>我是谁</h1>
]
const stl = {
	fontSize:'24px',
	color:'red'
}
function App(){
	return (<div>
	<h1 className='myh'>张三</h1>
	{arr}
	{<p style={stl}>应用样式</p>}
	</div>)
}
export default App;

1. key 帮助 React 识别哪些元素改变了，比如被添加或删除。应当给数组中的每一个元素赋予一个确定的标识。
2. 如果列表项目的顺序可能会变化，不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。

五、事件渲染 

React 事件与 js 事件一致 ，但是React 事件的命名采用 小驼峰式 （camelCase）

5.1、箭头函数 onClick={()=>{ xx }}

function App() {
  return (<div>
    <button onClick={() => { alert("秋天") }}>按钮</button>
  </div>)
}
export default App;

5.2、onClick={函数名}

const say = function () {
  alert("秋天")
}
function App() {
  return (<div>
    <button onClick={say}>按钮</button>
  </div>)
}
export default App;

5.3、onClick={函数名.bind(this,参数)}

const say = function (str) {
  alert("秋天" + str)
}
function App() {
  return (<div>
    <button onClick={say.bind(this, '真美')}>按钮</button>
  </div>)
}
export default App;

5.4、onClick={()=>函数名(参数)}

const say = function (str) {
  alert("秋天" + str)
}
function App() {
  return (<div>
    <button onClick={() => say('真温柔')}>按钮</button>
  </div>)
}
export default App;

六、react 响应式数据 State

 
import React,{Component}from 'react';
class App extends Component{
	constructor(props) {
	    super(props);
		this.state={num:1}
	}
	addNum(n){
		this.setState({num:this.state.num+n})
	}
	render(){
		return(<div>
		<h1>函数类</h1>
		<button onClick={()=>{
			this.setState({num:this.state.num+1})
		}}>{this.state.num}</button>
		<button onClick={this.addNum.bind(this,2)}>{this.state.num}</button>
		</div>);
	}
}
export default App;