react学习（一）（react特点，创建react项目，jsx语法，函数组件和class组件，样式写法，条件语句，遍历数组和点击事件，state和setState，表单处理）
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
React 特点
-
1.声明式设计 −React采用声明范式，可以轻松描述应用。
-
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
-
3.灵活 −React可以与已知的库或框架很好地配合。
-
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
-
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
-
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
创建react项目
npx create-react-app 项目名
引入
import React from 'react'; import ReactDOM from 'react-dom/client'; //18版本，18以前用 import ReactDOM from 'react-dom
创建react元素 渲染react元素
const title = React.createElement('h1',null,'hello react!') //18版本以前用的
const root = ReactDOM.createRoot(document.getElementById('root')); //18版本用的
ReactDOM.render(title,document.getElementById('root')) //18版本以前用的
root.render(<React.StrictMode><App /> </React.StrictMode>); //18版本用的
legacy 模式：
ReactDOM.render(<App />, rootNode);
// 这个模式是当前React App使用的模式，但是可能不支持某些新特性
blocking 模式：
ReactDOM.createBlockingRoot(rootNode).render(<App />);
// 过渡模式
concurrent 模式：
ReactDOM.createRoot(rootNode).render(<App />);
// 终极模式
JSX语法(核心)
javascript XML
就是在js里面写XML (html)，通过babel转换成ReactDOM.createRoot()模式
函数组件和class组件两种写法
例子
import React from 'react'; import ReactDOM from 'react-dom'; function Hello(props) { return <h1>Hello World!</h1>; } ReactDOM.render(<Hello />, document.getElementById('root'));
函数组件
样式写法
import './css/style.css' function StyleDiv() { return ( <div> <p style={{color:'red'}}>行内样式</p> <p className="title">className样式</p> <p className="show">显示隐藏</p> </div> ) } export default StyleDiv
条件语句写法
function IfElseDiv() { const loading = false if (loading) { return <p>loading</p> } else { return <p>IfElseDiv</p> } // return loading?<h1>loading</h1>:<h1>IfElseDiv</h1> } export default IfElseDiv
遍历数组和点击事件写法
function MapDiv() { const list = [{ id: 1, name: 'tom' }, { id: 2, name: 'jerry' }] function handleClick(e){ console.log('函数点击事件') console.log(e)//事件对象 } return ( <div> <ul> {list.map(item => <li key={item.id}>{item.name}</li>)} </ul> <button onClick={handleClick}>函数点击事件</button> </div> ) } export default MapDiv
class组件写法
import React from "react"; class ClassExtendsDiv extends React.Component { handleClick(e) { console.log('class点击事件') console.log(e)//事件对象 } render() { return ( <div> <button onClick={this.handleClick}>class点击事件</button> </div> ) } } export default ClassExtendsDiv
state和setState
import React from "react"; class StateDiv extends React.Component { state = { count: 1 } //简化版 // constructor() { // super() // this.state = { // count: 1 // } // } //两种调用方式（this指向问题） //第一种 handleClick = () => { this.setState({ count: this.state.count + 1 }, function () { console.log(this.state) //setState方法第二个参数为回调函数异步处理 }) console.log(this.state)//同步更新发现不是最新数据，因为setState异步处理 } //第二种 // handleClick() { // this.setState({ // count: this.state.count + 1 // }, function () { // console.log(this.state) //setState方法第二个参数为回调函数异步处理 // }) // console.log(this.state)//同步更新发现不是最新数据，因为setState异步处理 // } render() { return ( <div> 计数器：{this.state.count} <button onClick={this.handleClick}>增加</button> {/* <button onClick={() => { this.handleClick() }}>增加</button> */} </div> ) } } export default StateDiv
表单处理写法
import React from "react"; class InputDiv extends React.Component { state = { txt: '', id: '', list: [{ id: 1, name: 'tom' }, { id: 2, name: 'jerry' }], checked: false, txtRef: '' } constructor() { super() this.txtRef = React.createRef()//创建ref } // handleChange = (e) => { // this.setState({ // txt: e.target.value // }) // } // selectChange = (e) => { // this.setState({ // id: e.target.value // }) // } // checkedChange=(e)=>{ // this.setState({ // checked:e.target.checked // }) // } //变成一个事件处理表单要加name属性来判断 formChange = (e) => { const target = e.target const value = e.target.type === 'checkbox' ? target.checked : target.value const name = e.target.name this.setState({ [name]: value }) } getTxt = (e) => { //通过ref获取值 this.setState({ txtRef: e.target.value }) console.log('通过ref获取值', this.txtRef.current.value) } render() { return ( // <div> // input: // <input type="text" value={this.state.txt} onChange={this.handleChange} /> // 内容：{this.state.txt} // <br /> // select: // <select value={this.state.id} onChange={this.selectChange}> // {this.state.list.map(item => <option value={item.id} key={item.id}>{item.name}</option>)} // </select> // <br /> // checkbox: // <input type="checkbox" checked={this.state.checked} onChange={this.checkedChange}/> // </div> <div> input: <input type="text" name='txt' value={this.state.txt} onChange={this.formChange} /> 内容：{this.state.txt} <br /> select: <select name='id' value={this.state.id} onChange={this.formChange}> {this.state.list.map(item => <option value={item.id} key={item.id}>{item.name}</option>)} </select> <br /> checkbox: <input type="checkbox" name='checked' checked={this.state.checked} onChange={this.formChange} /> <br /> 通过ref获取值: <input type="text" ref={this.txtRef} value={this.state.txtRef} onChange={this.getTxt} /> </div> ) } } export default InputDiv
