当前位置：首页 > news >正文

React基础知识精简全面推荐

news 来源：原创 2024/9/20 13:26:28

这篇博文主要对一些刚入门react框架的同学，以及对react基本知识进行巩固的，最后就是精简一下基本知识，以方便自己查看，感谢参考，有问题评论区交流，谢谢。

1.JSX

2.Props 和 State

3.组件生命周期

4.列表和 Keys

5.事件处理

6.表单

没有配置React的同学请参考：React 开发环境搭建超详细全面推荐-CSDN博客

1.JSX

const  element = <h1>Hello,world!</h1> ;

这是一段jsx代码，语法看起来很像html，实际上jsx语法所用的标签可以使用html标签，也可以使用自定义的react组件作为jsx中的标签。

jsx可以使用变量，name就是一个变量，注意：变量要用大括号括起来 { }

const  name = 'young';
const  element = <h1>Hello,{name}!</h1> ;

2.Props 和 State

这两个都是很重要的概念。react组件正常工作都需要依赖这两个组件，这两者都与react的状态有关系，两者的区别是 props是对外的，state是组件对内的接口。具体理解是

props是外部组件通过props将状态或者方法传递给当前组件来使用，所以props是父组件与子组件之间传递的接口；

state是组件内部的接口，用于维护组件内部的状态；

总之一句话 props是对外的，state是对内的。

3.组件生命周期

是react对外暴露出来的钩子函数，我们开发的时候可以在这些函数中定义一些逻辑，来实现业务功能逻辑。

这里分享几个常用的且比较重要的方法。

组件的挂载阶段：constructor（），render（），componentDidMount（）

组件的更新阶段：render（），componentDidUpdate（）

组件的卸载阶段：componentWillUnmount（）

4.列表和 Keys

渲染列表也是比较常用的，这里keys的值都是不相同的，为了保证当列表发生变化的时候react底层把key作为每一项的唯一标识。

const numbers = [ 1,2,3,4,5,6 ];
const listItems = numbers.map((number) = > \<li key={number.toString()} >{number}</li>
);

const todoItems = todos.map((todo) => <li key = {todo.id}>{todo.text}</li>
);

5.事件处理

5.1事件处理是和用户。进行交互必不可少的。注意react中事件名 onClick 是驼峰的写法C大写的

html中事件<button onclick="addUser()"> add
</button>React 中添加事件
<button onClick={addUser}> add
</button>

5.2 事件this指向问题。在构建函数中有这一句 this.handleClick = this.handleClick.bind(this);

为这个handleClick绑定了 this ，这个this就是当前的组件，如果没有这一句话，this指向的是当前组件的event点击事件对象。

class Toggle extends React.Component {constructor(props){super(props);this.state = {isToggleOn: true};this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState(preState => ({isToggleOn: !preState.isToggleOn}));}
}
render(){return (<button onClick={this.handleClick}>{this.state.isToggleOn? 'ON':'OFF'}</button>)
}

此外还有es6的箭头函数同样也能实现这种效果，即上面的代码handleClick绑定this部分也能换成下面代码

handleClick = () => {console.log('this is:',this);
}

6.表单

我们可以通过使 React 的 state 成为 “单一数据源原则” 来结合这两个形式，然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式，其值由 React 控制的输入表单元素称为“受控组件”。

在使用表单组件的时候推荐使用组件受控的方式

下面的代码例子中input输入框中绑定onChange事件，当用户输入修改输入框内容，会触发onChange事件，事件处理拿到用户修改后的数据赋值给state.value的值，state发生变化，组件会重新被渲染，render方法重新被执行，input中的 value={this.state.value}重新设置成新的value值。

这样就保证了value的值是通过state状态的管理。

class NameForm extends React.Component {constructor(props) {super(props);this.state = {value: ''};this.handleChange = this.handleChange.bind(this);this.handleSubmit = this.handleSubmit.bind(this);}handleChange(event) {this.setState({value: event.target.value});}handleSubmit(event) {alert('A name was submitted: ' + this.state.value);event.preventDefault();}render() {return (<form onSubmit={this.handleSubmit}><label>Name:<input type="text" value={this.state.value} onChange={this.handleChange} /></label><input type="submit" value="Submit" /></form>);}
}

有了这些基础知识来新建一个自己的React项目吧 React如何搭建开发环境创建一个新项目：

React 开发环境搭建超详细全面推荐-CSDN博客