React 快速入门（笔记）

简介（注水）： react 特点

1.声明式：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
2.组件化： 创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。
3.一次学习，随处编写：无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。
正文开始：

一、安装

1.cdn 引用安装
2.使用Create-React-App本地安装

//需要node 较新版本
npx create-react-app my-app
cd my-app
npm run start

//index.js 入口文件
import React from 'react';
import ReactDOM from 'react-dom/client';
// import './index.css';
import App from './App';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  // fresh(){
  //   setInterval(function(){
  //     this.setState({
  //       date: new Date()
  //     })
  //   },1000)
  // }
  //生命周期函数
  componentDidMount() {
    this.timerID  = setInterval(
      () => this.tick(),1000
    )

  }
  //生命周期函数
  componentWillMount(){
    clearInterval(this.timerID)
  }
  tick(){
    this.setState({
      date: new Date()
    })
  }
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
}


 ReactDOM.createRoot(document.getElementById('root'))
  .render(
    // <React.StrictMode>
    //   <App />
    // </React.StrictMode>
    //element
    <div>
    <App/>
    <Clock />
    </div>
  );

二、jsx

jsx就是这样一串
return <div>{name}</div> //name 是变量
还可以带入表达式
return <div>{firstName + lastName}</div>

三、组件

1.函数组件

//定义一个函数组件
function FunctionComponent(){
	return <div>Hello World</div>
}

2.定义一个类组件

//顶部引用react 否则会报错
import React from 'react'
class ClassComponent extends React.component{
	//return () 小括号
	render(){
		return (
			<div>Hello world</div>
		)
	}
}

3.App组件调用上面定义的组件

class App extends React.component{
	render(){
	return （
	//这里要用div 包起来多个组件的话
	<div>
		<FunctionComponent/>
		<ClassComponent>
	</div>	
	）
	}
}

四、组件通信（props）

//简单讲讲props父子组件通信
//1.传递参数
function ChildComponrnt(props){
	return <div>{props.name}</div>
}

function ParentComponent(){ //父组件
	return <ChildComponent name="Csdn"/>	
}
//2.传递方法  事件在后面。。。顺序搞错了哈哈
function ChildComponent(props){
	return <div onClick={props.handleClick}>点我试试</div>
}
function ParentComponent(){
	return <div><ChildComponent handleClick={alert('Click handle')}/></div>
}

五、元素渲染

class SomeComponent extends React.Component{
	render(){
		if(someCondition){
			return <div class="compoennt1">SomeComponent</div>
		}else{
			return <div>OtherComponent</div>
		}
	}
}

六、列表渲染

	//使用map 方法渲染列表
	class ListComponent extends React.Component{
		const lists = [1,2,3,4,5,6];
		render(){
			return(
				<ul class="list">
					lists.map((item)=>{
						return <li class="list-item">{item}</li>
					})	
				</ul>
			)
		}
	}

七、事件

class SomeComponent extends React.Component{
	//构造函数
	constructor(props){
		super(props) //传入props
		//绑定this 在回调函数中可用
		this.handleClick = this.handleClick.bind(this)
	}
	handleClick(){
		console.log('You click')
	}
	render(){
		return(
			<button onClick={this.handleClick}>试着点击我看控制台</button>  //onClick 驼峰法
		)
	}
}	

八、state 和生命周期

//实时刷新时钟实例
import React from 'react';
import ReactDOM from 'react-dom/client';
// import './index.css';
import App from './App';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  // fresh(){
  //   setInterval(function(){
  //     this.setState({
  //       date: new Date()
  //     })
  //   },1000)
  // }
  //生命周期函数
  componentDidMount() {
    this.timerID  = setInterval(
      () => this.tick(),1000
    )

  }
  //生命周期函数
  componentWillUnmount(){
    clearInterval(this.timerID)
  }
  tick(){
    this.setState({
      date: new Date()
    })
  }
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
}


 ReactDOM.createRoot(document.getElementById('root'))
  .render(
    // <React.StrictMode>
    //   <App />
    // </React.StrictMode>
    //element
    <div>
    <App/>
    <Clock />
    </div>
  );

九、深入学习

1、bind this
2.跨组件传参 如祖孙之间传参 兄弟组件之间传参
3.高级概念
4.插件，组件库 redux 等