把网站生成app的免费平台,资讯平台网站模板,蓬莱网站建设,网上自学电脑课程这篇博文主要对一些刚入门react框架的同学#xff0c;以及对react基本知识进行巩固的#xff0c;最后就是精简一下基本知识#xff0c;以方便自己查看#xff0c;感谢参考#xff0c;有问题评论区交流#xff0c;谢谢。
目录
1.JSX
2.Props 和 State
3.组件生命周期…这篇博文主要对一些刚入门react框架的同学以及对react基本知识进行巩固的最后就是精简一下基本知识以方便自己查看感谢参考有问题评论区交流谢谢。
目录
1.JSX
2.Props 和 State
3.组件生命周期
4.列表 和 Keys
5.事件处理
6.表单 没有配置React的同学请参考React 开发环境搭建 超详细 全面 推荐-CSDN博客
1.JSX
const element h1Hello,world!/h1 ;
这是一段jsx代码语法看起来很像html实际上jsx语法所用的标签可以使用html标签也可以使用自定义的react组件作为jsx中的标签。
jsx可以使用变量name就是一个变量注意变量要用大括号括起来 { }
const name young;
const element h1Hello,{name}!/h1 ;
2.Props 和 State
这两个都是很重要的概念。react组件正常工作都需要依赖这两个组件这两者都与react的状态有关系两者的区别是 props是对外的state是组件对内的接口。具体理解是
props是外部组件通过props将状态或者方法传递给当前组件来使用所以props是父组件与子组件之间传递的接口
state是组件内部的接口用于维护组件内部的状态
总之一句话 props是对外的state是对内的。 3.组件生命周期
是react对外暴露出来的钩子函数我们开发的时候可以在这些函数中定义一些逻辑来实现业务功能逻辑。
这里分享几个常用的且比较重要的方法。
组件的挂载阶段constructorrendercomponentDidMount
组件的更新阶段rendercomponentDidUpdate
组件的卸载阶段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 onclickaddUser() add
/buttonReact 中添加事件
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}labelName:input typetext value{this.state.value} onChange{this.handleChange} //labelinput typesubmit valueSubmit //form);}
}
有了这些基础知识来新建一个自己的React项目吧 React如何搭建开发环境 创建一个新项目
React 开发环境搭建 超详细 全面 推荐-CSDN博客 有问题评论区欢迎交流谢谢参考。
react实战项目请参考react实战项目干货
