这篇博文主要对一些刚入门react框架的同学，以及对react基本知识进行巩固的，最后就是精简一下基本知识，以方便自己查看，感谢参考，有问题评论区交流，谢谢。
目录
[2.Props 和 State](#2.Props 和 State)
[4.列表 和 Keys](#4.列表 和 Keys)
没有配置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实战项目请参考：react实战项目干货
