react 基础学习

最新推荐文章于 2025-07-03 15:58:36 发布

qq_25186543

最新推荐文章于 2025-07-03 15:58:36 发布

阅读量189

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_25186543/article/details/80168507

react 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何使用Create React App快速搭建React应用，并深入讲解React组件的定义与使用，包括状态管理、事件处理、列表渲染及表单交互等关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装 react

$ cnpm install -g create-react-app     //全局安装 react
$ create-react-app my-app              //创建项目
$ cd my-app/                           //进入项目
$ npm start                            //启动项目

2、定义组件

	class Clock extends React.Component {  //创建组件
		  constructor(props) {   //构造方法
		    super(props);
		    this.state = {     //数据源
		    	date: new Date(),
		    };
		  }
		  componentDidMount() {  //在将组件输出呈现给DOM后，该钩子运行。这是设置计时器的好地方：
		    
		  }
		
		  componentWillUnmount() {
		    
		  }
			
		  render() {
		    return (
		      <div>
		        <h1>Hello, world!</h1>
		        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
		      </div>
		    );
		  }
		}
		//把组件装进 root 
		ReactDOM.render(
		  <Clock />,
		  document.getElementById('root')
		);

3、数据渲染 ,静态数据： { this.state.xx }

		  render() {
		    return (
		      <div>
		        <h1>Hello, world!</h1>
		        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
		      </div>
		    );
		  }

4、操作方法

方法1：在标签的 onClick把 event 传入要执行的方法 {(e)=>this.handleClick(e)

		  render() {
		    return (
		      <div>
		        <button onClick={(e)=>this.handleClick(e)}>
			     {this.state.isToggleOn ? 'ON' : 'OFF'}
			 </button>
		      </div>
		    );

方法2：在构造方法 constructor 里加上 bind this.handleChange = this.handleChange.bind(this);

class App extends Component {
	constructor(props) {
            super(props);
            this.state = {
    	        isToggleOn: true,
            };
    
    this.handleChange = this.handleChange.bind(this);
  }
	
	handleClick(){
		this.setState({isToggleOn : !this.state.isToggleOn})
		console.log(this.state.selectValue)
	}
  render() {
  	const isToggleOn = this.state.isToggleOn;
        return (
          <div className="App">
            <button onClick={this.handleClick}>
	      {this.state.isToggleOn ? 'ON' : 'OFF'}
	    </button>
          </div>
        );
  }
}

5、循环数据 map 方法，

这里有个要注意的点就是

1、在循环的 html 里加上一个唯一的 key ，不然会报错

2、 List 方法要写在组件的外面

function List(props){
	const list = props.list;
	const listLi = list.map((item,index)=>
		<li key={'li_'+index}>{item}</li>
	)
	return (
		<ul>{listLi}</ul>
	)
}


  render() {
    const arr = this.state.arr;	
    return (
      <div className="App">
        <List list={arr} />
      </div>
    );
  }

6、表单：用 onChange 方法改变 state 的值

class App extends Component {
	constructor(props) {
            super(props);
            this.state = {
    	        value : '',
    	        selectValue : '1'
            };
    
            this.handleChange = this.handleChange.bind(this);
            this.selectChange = this.selectChange.bind(this);
      }
	
	handleChange(e){
		this.setState({value : e.target.value})
	}
	
	selectChange(e){
		this.setState({selectValue : e.target.value});
	}
	
  render() {	
    return (
      <div className="App">
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        {this.state.value}
        <select value={this.state.seleceValue} onChange={this.selectChange}>
        	<option value="1">第1个</option>
        	<option value="2">第2个</option>
        	<option value="3">第3个</option>
        	<option value="4">第4个</option>
        </select>
      </div>
    );
  }
}