1、脚手架安装React项目
安装 create-react-app 脚手架来创建 react 项目。
npm install -g create-react-app
create-react-app my-app
使用该脚手架创建的 react 项目默认是不显示配置文件的，可以使用 npm run eject 命令将配置文件显示出来，该命令是一个单向操作，即一旦运行了，就不能再次将配置文件隐藏。
2、JSX语法
JSX是一种 JavaScript 的语法扩展，react 用它来声明 React 中的元素。你可以在 JSX 当中任意地使用 JavaScript 表达式，不过在 JSX 当中的表达式要包含在大括号里。
//JSX语法
const element = <h1>Hello, world!</h1>;
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
//在 JSX 中使用表达式
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
// JSX 其实就是一个 JS 对象，你可以将它赋值给变量，或者当作参数传入、作为返回值都可以
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
在代码编译过后你可以看到 JSX 会被转化为普通的 JavaScript 对象，所以实际上，JSX 语法返回的是一个 JS 对象，这个对象也被称为 React 元素。
在 JSX 中我们可以放心地使用用户输入，因为React DOM 在渲染之前默认会过滤掉所有传入的值，它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。
const title = response.input;
// 直接使用是安全的：
const element = <h1>{title}</h1>;
2.1、JSX 的属性
在 JSX 中，可以使用引号来定义以字符串为值的属性，也可以使用大括号来定义以 JavaScript 表达式为值的属性
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了，因为JSX 会将引号当中的内容识别为字符串而不是表达式。
2.2、更新元素渲染
JSX 语法返回的是一个 JS 对象，这个对象也被称为 React 元素，元素是构成 React 应用的最小单位，在页面上进行渲染。
要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
React 元素都是不可变的。当元素被创建之后，我们无法改变其内容或属性。如果使用上面的方法，即使用元素来渲染页面，更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法替换之前的元素。当然，我们可以通过使用有状态组件（类定义组件）来避免这种落后的方法。
3、组件
3.1、定义组件
组件可以接收任意的输入值（称之为“props”），并返回一个 React 元素，即 JS 对象。
函数定义组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
ES6 类定义组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
注意：组件的返回值只能有一个根元素。组件名称必须以大写字母开头。例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，并且在使用该组件时你必须定义或引入它。
3.2、组件接收传入值（props）
React 元素可以是DOM标签，也可以是用户自定义的组件，当 React 元素是用户自定义的组件，它会将 JSX 属性作为单个对象传递给该组件，这个对象称之为“props”。
const element = <div />;
//用户自定义的组件
const element = <Welcome name="Sara" />;
在组件中，不允许修改 props 的值，只允许读取。
4、类组件
使用元素渲染或者是函数定义组件渲染来更新页面非常不方便，所以在一个 react 项目中我们应该使用类组件来渲染页面。使用类我们就可以使用它的一些特性，例如局部状态 state、生命周期钩子等，这大大方便了我们的开发。
类组件代码示例：
class Clock extends React.Component {
constructor(props) {
super(props); //类组件应始终使用 props 调用基础构造函数。
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
4.1、组件生命周期
官网的组件生命周期图：
我们可以在生命周期钩子上定义一些函数来进行一些操作，如下实现了一个每秒钟修改一次状态的效果：
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
//组件挂载后运行
componentDidMount() {
//如果数据不渲染在页面上，你可以直接往类上添加字段，不需要添加到state上
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.render(
<Clock />,
document.getElementById('root')
);
4.2、局部状态（state、setState）
局部状态 state 用来维护组件内部数据，可以通过 this.state.propertyName 来获取数据。构造函数是唯一能够初始化 this.state 的地方。
组件可以将它的状态作为属性传递给其子组件，但是除了拥有并设置它的组件外，其它组件不可访问另一个组件的状态，这就是为什么状态通常被称为局部或封装。
在更改局部状态时，不要直接修改，而应该使用 setState 方法，否则 react 不会重新渲染组件。setState 方法只是将你返回的对象合并到局部状态 state 中，并且是浅合并，即返回的对象中提及到的属性会被完全替换，没有涉及到的属性不受影响。
//Wrong 不要直接修改
//this.state.comment = 'Hello';
// 应当使用 setState() 方法
this.setState({comment: 'Hello'});
在利用当前状态和 props 的值来修改下一状态时，应该用一个函数来作为 setState 的参数。否则如果直接修改的话，有可能更改会没有效果，因为这两种值是异步更新的。
// Wrong 不应该直接修改
//this.setState({
// counter: this.state.counter + this.props.increment,
//});
//setState() 应该接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数，将props做为第二个参数：
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
//或者使用常规函数
this.setState(function(prevState, props) {
return {
counter: prevState.counter + props.increment
};
});
4.3、父子组件传值及事件调用
react 中父组件可以将数据作为子组件的属性进行传值，子组件通过 props 属性接收值。
父组件可以监听子组件中的某个事件，子组件直接在内部触发 props 事件即可以触发父组件监听的事件，由此父组件可以进行响应。
//子组件
class Child extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
//子组件触发 props 事件
this.props.onDataChange(e.target.value);
}
render() {
const val = this.props.val;
return (
<input value={val} onChange={this.handleChange} />
);
}
}
//父组件
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {name: 'wen'};
}
//父组件将 onDataChange 传递给子组件即监听了该事件，当子组件触发该事件时，父组件触发 handleChange 事件
handleChange(name) {
this.setState({name});
}
render() {
return (
<div>
<Child
val={this.state.name} onDataChange={this.handleChange} />
</div>
);
}
}
5、事件处理
React 元素的事件函数命名采用驼峰式写法，这点跟普通 DOM 元素调用函数不太一样。
<!- 普通 DOM 元素 -->
<button onclick="activateLasers()">
Activate Lasers
</button>
<!- react 语法 -->
<button onClick={activateLasers}>
Activate Lasers
</button>
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。
<!- 普通 DOM 元素 -->
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
<!- react 语法 -->
function handleClick(e) {
e.preventDefault();
console.log('阻止默认行为');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
事件处理的 this 指针问题及如何绑定 this 可以参考：https://www.cnblogs.com/wenxuehai/p/11378229.html
5.1、给事件函数传递参数
为事件处理函数传递额外的参数，下面两种方式是等价的：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
箭头函数传递参数时，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象及其它的一些参数将会被隐式的进行传递。
通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e要排在所传递参数的后面
preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
}
<a href="" onClick={this.preventPop.bind(this,'aaa')}>Click</a>
6、条件渲染
在 react 中，我们可以使用 if 语句、&& 运算符、三元运算符来实现条件渲染，主要就是通过运算符来控制元素是否显示。
//if 语句控制是否渲染
render() {
let button = null;
if (true) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>{button}</div>
);
}
// &&运算符控制是否渲染，在react中，大括号{}内如果是false，会忽略并跳过，并不会渲染出来
<div>
<h1>Hello!</h1>
{arr.length > 0 && <h2>aaa</h2> }
</div>
//三元运算符
<div>
{isLoggedIn ? (
<LogoutButton/>
) : (
<LoginButton />
)}
</div>
如果不想让组件渲染，可以让 render 方法返回 null，组件的render方法返回null并不会影响该组件生命周期方法的回调。
7、列表渲染
在 react 中，可以使用 map 遍历方法来实现列表渲染。
//可以生成一个 JSX 元素，然后将该 JSX 元素插入渲染
function NumberList(props) {
const numbers = [1,2,3,5,6];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
//或者直接在大括号中写遍历表达式，因为JSX允许在大括号中嵌入任何表达式
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
7.1、列表渲染中的 key
react 在使用列表渲染时，必须给每个列表元素分配一个 key，否则会出现一个警告 a key should be provided for list items。
列表渲染时，key只需在兄弟元素之间唯一即可。react 在进行列表渲染时，数组元素中使用的 key 在其兄弟元素之间应该是独一无二的。然而，它们并不需要是全局唯一的，即如果不是同一列表兄弟元素的话，它们的 key 值是可以重复的。当我们在同一个页面中先后进行两次列表渲染时，我们可以使用相同的键。
//同一组件中，不同列表元素，key值可以重复
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);
8、表单元素
8.1、受控组件
使用受控组件可以将用户输入的值保存在组件的状态属性中，并且能控制用户输入时所发生的变化。
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
//必须要主动绑定 onChange 事件，并且修改 value 值，此时 value的值才会改变。react并没有像Vue那样有v-model的功能
render() {
return (
<input type="text" value={this.state.value} onChange={this.handleChange} />
);
}
}
textarea、select标签写法都类似，可参考：https://www.reactjscn.com/docs/forms.html
当有多个受控元素时，可以给每个元素都添加一个 name 属性，处理函数就可以根据 name 属性的值来进行相应操作，由此可以避免重复写处理函数。
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
//可以这样设置状态
this.setState({
[name]: value
});
}
render() {
return (
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
);
}
}
8.2、非受控组件
如果你觉得需要为每个表单元素绑定一个处理函数比较麻烦，你可以尝试使用非受控组件。非受控组件将真实数据保存在 DOM 中，我们可以使用 ref 从 DOM 中获取表单值。
使用非受控组件可以减小代码量，但并不推荐使用，推荐还是使用受控组件。
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert(this.input.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref={(input) => this.input = input} />
<input type="submit" value="Submit" />
</form>
);
}
}
非受控组件还可以指定元素初始值，使用 defaultValue
<input defaultValue="Bob" type="text" ref={(input) => this.input = input} />
9、组合（插槽）
在 react 中，可以通过使用 props.children 来实现类似于 Vue 中的插槽的功能。
//子组件
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
//父组件
function WelcomeDialog() {
return (
<FancyBorder>
<h1>Welcome</h1>
</FancyBorder>
);
}
具名插槽：
//子组件
function SplitPane(props) {
return (
<div className="SplitPane">
<div>
{props.left}
</div>
<div>
{props.right}
</div>
</div>
);
}
//父组件
function App() {
return (
<SplitPane
left={
<Contacts />
}
right={
<Chat />
} />
);
}
上面的 <Contacts /> 和 <Chat /> 这样的 React 元素其实本质上都是对象，所以你可以像任何其他元素一样传递它们。使用具名插槽其实就是通过属性来传递数据，不过此时的数据是一个 react 元素而已。
来源：https://www.cnblogs.com/wenxuehai/p/11374469.html |
发表于 2019-8-18 23:12:00
